Es un DIV dentro de un TD una mala idea?

Question

Parece que he oído / leído en alguna parte que un <div> en el interior de un <td> era un no-no. No es que no va a funcionar, sólo algo acerca de ellos no ser realmente compatibles en función de su tipo de pantalla. No se puede encontrar ninguna evidencia para respaldar mi presentimiento, así que puede ser totalmente equivocado.

Answer 1

El uso de un div instide un td no es peor que cualquier otra forma de utilizar tablas para maquetar. (Algunas personas nunca usan las tablas de diseño sin embargo, y pasar a ser uno de ellos.)

Si utiliza un div en un td que sin embargo se puede obtener en una situación en la que podría ser difícil de predecir cómo se dimensionarán los elementos. El valor predeterminado para un div es determinar su anchura de su matriz, y el valor predeterminado para una celda de tabla es para determinar su tamaño en función del tamaño de su contenido.

Las reglas de cómo un div deben ser del tamaño está bien definido en las normas, pero las reglas de cómo no está tan bien definido un td debe ser de un tamaño, por lo que diferentes navegadores utilizan ligeramente diferentes algoritmos.

Answer 2

Después de comprobar la XHTML DTD he descubierto que a -elemento se le permite contener elementos de bloque como encabezados, listas y también

-Elementos. Por lo tanto, el uso de un

-elemento dentro de un -elemento no viola el estándar XHTML. Estoy bastante seguro de que otras variaciones modernas de HTML tienen un modelo de contenido equivalente para la -elemento.

Estas son las reglas pertinentes 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">

No. No necesariamente.

Si es necesario colocar un DIV dentro de un TD, asegurarse de que está utilizando el TD correctamente. Si no se preocupan por tabular los datos, y la semántica, a continuación, que en última instancia va no se preocupan por DIVs en anotaciones. No creo que hay un problema, aunque - si Tienes para hacerlo, estás bien

.

De acuerdo con la especificación de HTML

A <div> se puede colocar donde contenido fluya se espera ¹ , que es el modelo de contenido <td> ² .

A-celda de la tabla puede contener legítimamente elementos en bloque así que no es, inherentemente, un faux-pas. implementació navegador, por supuesto, deja esta una posición especulativa-teórico. Puede causar problemas de diseño e insectos.

A pesar de que se utilizaron tablas en el formato -y todavía son- veces me imagino que la mayoría de los navegadores representar el contenido correctamente. Incluso IE.

Si desea utilizar position: absolute; en el div con position: relative; en el TD que se ejecutará en problemas. FF, Safari y Chrome (Mac, no PC sin embargo) no se posicionará el div en relación con el TD (como era de esperar) esto también es cierto para los divs con display: table-whatever; así que si quieres hacer que se necesitan dos divs, uno para la width: 100%; height: 100%; recipiente y ningún borde por lo que llena el td sin ningún impacto visual. y luego el uno absoluto.

aparte de eso, ¿por qué no dividir la celda?

He enfrentado el problema mediante la colocación de un <div> dentro <td>.

he podido identificar la div usando document.getElementById() Si coloco que td interior. Pero fuera, que funcionaba bien.

Como todo el mundo ha mencionado, puede que no sea una buena idea para fines de diseño. Llegué a esta pregunta porque me preguntaba lo mismo y yo sólo quería saber si sería un código válido.

Ya que es válido, puede utilizarla para otros fines. Por ejemplo, lo que voy a utilizar para es poner un poco de fantasía "CSSed" divs filas de la tabla en el interior y luego utilizar una función jQuery rápida para permitir al usuario ordenar la información por precio, nombre, etc. De esta manera, el única tabla de diseño le dará a mí es el "orden vertical", pero voy a controlar anchura, altura, fondo, etc., de los divs por CSS.

Dos modos de tratar con ella

1. div poner dentro de la etiqueta tbody
2. div poner dentro de la etiqueta tr

Ambos enfoques son válidos, si ves feference: https://stackoverflow.com/a/23440419/2305243

semántica , eso es todo. Funciona bien, pero puede haber lectores de pantalla o algo por el camino que no va a disfrutar de procesamiento de su HTML si "rompe la semántica".

Answer 3

No. No necesariamente.

Si es necesario colocar un DIV dentro de un TD, asegurarse de que está utilizando el TD correctamente. Si no se preocupan por tabular los datos, y la semántica, a continuación, que en última instancia va no se preocupan por DIVs en anotaciones. No creo que hay un problema, aunque - si Tienes para hacerlo, estás bien

.

De acuerdo con la especificación de HTML

A <div> se puede colocar donde contenido fluya se espera ¹ , que es el modelo de contenido <td> ² .

Answer 4

A-celda de la tabla puede contener legítimamente elementos en bloque así que no es, inherentemente, un faux-pas. implementació navegador, por supuesto, deja esta una posición especulativa-teórico. Puede causar problemas de diseño e insectos.

A pesar de que se utilizaron tablas en el formato -y todavía son- veces me imagino que la mayoría de los navegadores representar el contenido correctamente. Incluso IE.

Answer 5

Si desea utilizar position: absolute; en el div con position: relative; en el TD que se ejecutará en problemas. FF, Safari y Chrome (Mac, no PC sin embargo) no se posicionará el div en relación con el TD (como era de esperar) esto también es cierto para los divs con display: table-whatever; así que si quieres hacer que se necesitan dos divs, uno para la width: 100%; height: 100%; recipiente y ningún borde por lo que llena el td sin ningún impacto visual. y luego el uno absoluto.

aparte de eso, ¿por qué no dividir la celda?

Answer 6

He enfrentado el problema mediante la colocación de un <div> dentro <td>.

he podido identificar la div usando document.getElementById() Si coloco que td interior. Pero fuera, que funcionaba bien.

Answer 7

Como todo el mundo ha mencionado, puede que no sea una buena idea para fines de diseño. Llegué a esta pregunta porque me preguntaba lo mismo y yo sólo quería saber si sería un código válido.

Ya que es válido, puede utilizarla para otros fines. Por ejemplo, lo que voy a utilizar para es poner un poco de fantasía "CSSed" divs filas de la tabla en el interior y luego utilizar una función jQuery rápida para permitir al usuario ordenar la información por precio, nombre, etc. De esta manera, el única tabla de diseño le dará a mí es el "orden vertical", pero voy a controlar anchura, altura, fondo, etc., de los divs por CSS.

Answer 8

Dos modos de tratar con ella

1. div poner dentro de la etiqueta tbody
2. div poner dentro de la etiqueta tr

Ambos enfoques son válidos, si ves feference: https://stackoverflow.com/a/23440419/2305243

Answer 9

semántica , eso es todo. Funciona bien, pero puede haber lectores de pantalla o algo por el camino que no va a disfrutar de procesamiento de su HTML si "rompe la semántica".