Uma DIV dentro de um TD é uma má ideia?

Parece que ouvi / li em algum lugar que um <div>interior de um <td>era um não-não. Não que isso não funcione, apenas algo sobre eles não serem realmente compatíveis com base no tipo de exibição. Não consigo encontrar nenhuma evidência para apoiar meu palpite, então posso estar totalmente errado.

Usar um divinstide a tdnão é pior do que qualquer outra maneira de usar tabelas para o layout. No entanto, algumas pessoas nunca usam tabelas para layout, e eu sou uma delas.

Se você usar um divem um td, no entanto, entrará em uma situação em que pode ser difícil prever como os elementos serão dimensionados. O padrão para uma div é determinar sua largura a partir de seu pai, e o padrão para uma célula da tabela é determinar seu tamanho, dependendo do tamanho do seu conteúdo.

As regras de como uma divdimensão deve ser dimensionada estão bem definidas nos padrões, mas as regras de como a tddimensão deve ser dimensionada não são tão bem definidas; portanto, navegadores diferentes usam algoritmos ligeiramente diferentes.

Depois de verificar o XHTML DTD , descobri que um elemento <TD> pode conter elementos de bloco, como cabeçalhos, listas e também elementos <DIV>. Portanto, o uso de um elemento <DIV> dentro de um elemento <TD> não viola o padrão XHTML. Tenho certeza de que outras variações modernas de HTML têm um modelo de conteúdo equivalente para o elemento <TD>.

Aqui estão as regras relevantes de DTD:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

Não. Não necessariamente.

Se você precisar colocar um DIV dentro de um TD, verifique se está usando o TD corretamente. Se você não se importa com dados tabulares e semântica, em última análise, não se importa com DIVs em TDs. Eu acho que não há um problema - se você tiver que fazê-lo, você está bem.

De acordo com a especificação HTML

A <div>pode ser colocado onde o conteúdo do fluxo é esperado ¹ , que é o <td>modelo de conteúdo ² .

Uma célula de tabela pode legitimamente conter elementos em nível de bloco, portanto, não é inerentemente um passo em falso. A implantação do navegador, é claro, deixa essa posição teórico-especulativa. Isso pode causar problemas e erros de layout.

Embora as tabelas tenham sido usadas para o layout - e algumas vezes ainda o sejam -, imagino que a maioria dos navegadores renderize o conteúdo corretamente. Até o IE.

Se você deseja usar a posição: absoluto; no div com position: relative;no td você terá problemas. FF, safari e chrome (mac, embora não seja PC) não posicionarão a div em relação ao td (como você esperaria). Isso também é válido para divs com, display: table-whatever;portanto, se você quiser fazer isso, precisará de duas divs, uma para o contêiner width: 100%; height: 100%;e sem borda, por isso preenche o td sem nenhum impacto visual. e então o absoluto.

diferente disso, por que não apenas dividir a célula?

Eu enfrentei o problema colocando um <div>interior <td>.

Não consegui identificar a div usando document.getElementById()se eu colocar isso dentro de td. Mas lá fora, estava funcionando bem.

Como todos mencionaram, pode não ser uma boa ideia para fins de layout. Cheguei a essa pergunta porque estava pensando o mesmo e só queria saber se seria um código válido.

Como é válido, você pode usá-lo para outros fins. Por exemplo, para o qual vou usá-lo é colocar algumas divs "CSSed" sofisticadas nas linhas da tabela e, em seguida, usar uma função rápida do jQuery para permitir que o usuário classifique as informações por preço, nome etc. A única tabela de layout que me dará é a "ordem vertical", mas controlarei a largura, altura, plano de fundo etc. das divs pelo CSS.

Duas maneiras de lidar com isso

1. colocar tag divdentrotbody
2. colocar tag divdentrotr

Ambas as abordagens são válidas, se você observar a diferença: https://stackoverflow.com/a/23440419/2305243

Isso quebra a semântica , só isso. Funciona bem, mas pode haver leitores de tela ou algo no futuro que não gostará de processar seu HTML se você "quebrar a semântica".