¿Es un DIV dentro de un TD una mala idea?


143

Parece que escuché / leí en alguna parte que el <div>interior de un <td>era un no-no. No es que no funcione, solo algo acerca de que no son realmente compatibles según su tipo de pantalla. No puedo encontrar ninguna evidencia que respalde mi presentimiento, por lo que puedo estar totalmente equivocado.

Respuestas:


144

Usar un divinstide a tdno es peor que cualquier otra forma de usar tablas para el diseño. (Sin embargo, algunas personas nunca usan tablas para el diseño, y resulta que soy una de ellas).

Sin embargo, si usa un diven un td, se encontrará en una situación en la que podría ser difícil predecir cómo se dimensionarán los elementos. El valor predeterminado para un div es determinar su ancho a partir de su elemento primario, y el valor predeterminado para una celda de tabla es determinar su tamaño dependiendo del tamaño de su contenido.

Las reglas sobre cómo se divdebería dimensionar un a están bien definidas en los estándares, pero las reglas sobre cómo se tddebería dimensionar un a no están tan bien definidas, por lo que diferentes navegadores utilizan algoritmos ligeramente diferentes.


Sospecho que de aquí vino mi presentimiento. Gracias por aclararme.
jcollum

9
Si sus columnas tienen un ancho previamente especificado, no debería ser un problema. Solo recuerde configurar el diseño de la mesa: arreglado en la mesa para que los navegadores no anulen sus anchos (lo que podría generar problemas)
Jens Roland

66
Nunca dijo que estaba usando tablas para diseños.
texelate

@texelate table-layout:fixedCSS no es lo que crees que es. Reduce la cantidad de cálculos que los navegadores hacen al representar tablas calculando solo el tamaño de la primera fila.
SteveB

73

Después de comprobar XHTML DTD descubrí que un elemento <TD> puede contener elementos de bloque como encabezados, listas y también elementos <DIV>. Por lo tanto, el uso de un elemento <DIV> dentro de un elemento <TD> no viola el estándar XHTML. Estoy bastante seguro de que otras variaciones modernas de HTML tienen un modelo de contenido equivalente para el elemento <TD>.

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

1
Esta es la respuesta específica que estaba buscando. Así que gracias amablemente. Me imagino que dormiré un poco mejor esta noche.
3Dom

La única respuesta respaldada por el pec.
Peterter

Comparta con nosotros en qué parte de la DTD explica esto. No es un documento fácil de leer. ¡Gracias!
redolente

1
@redolent: Agregué las reglas DTD relevantes a mi respuesta.
Martin Liversage

¿Qué pasa con la especificación HTML5 que no es XHTML?
aplastar

38

No. No necesariamente.

Si necesita colocar un DIV dentro de un TD, asegúrese de estar usando el TD correctamente. Si no le interesan los datos tabulares y la semántica, en última instancia, no le interesarán los DIV en TD. Sin embargo, no creo que haya un problema: si tiene que hacerlo, está bien.

De acuerdo con la especificación HTML

Se <div>puede colocar A donde se espera el contenido de flujo 1 , que es el <td>modelo de contenido 2 .


2
Siempre quise responder una pregunta con un sí o un no;)
Jani Hartikainen

+1: realmente quería responder con algo más ingenioso, pero falló.
karim79

A pesar de que este tiene más upvotes Creo que Guffa trajo un punto que no se menciona aquí (y puede ser la fuente de mi corazonada)
jcollum

14

Una celda de tabla puede contener legítimamente elementos de nivel de bloque, por lo que no es, inherentemente, un paso en falso. La implementación del navegador, por supuesto, deja esto en una posición especulativa-teórica. Puede causar problemas de diseño y errores.

Aunque como las tablas se usaron para el diseño, y a veces todavía lo son, imagino que la mayoría de los navegadores mostrarán el contenido correctamente. Incluso IE.


Sospecho que la implementación del navegador es de donde obtuve mi "espera, esa es una mala idea".
jcollum

13

Si quieres usar position: absolute; en el div con position: relative;el td te encontrarás con problemas. FF, safari y chrome (mac, no PC) no posicionarán el div en relación con el td (como era de esperar), esto también es cierto para los divs, por display: table-whatever;lo que si desea hacerlo necesita dos divs, uno para el contenedor width: 100%; height: 100%;y sin borde, por lo que llena el td sin ningún impacto visual. y luego el absoluto.

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


66
La única respuesta práctica que no es la guerra santa
Antony Hatchkins

2

Me he enfrentado al problema colocando un <div>interior <td>.

No pude identificar el div usando document.getElementById()si lo coloco dentro de td. Pero afuera, estaba funcionando bien.


1

Como todos mencionaron, podría no ser una buena idea para propósitos de diseño. Llegué a esta pregunta porque me preguntaba lo mismo y solo quería saber si sería un código válido.

Como es válido, puede usarlo para otros fines. Por ejemplo, para lo que lo voy a usar es para poner algunos divs "CSSed" sofisticados dentro de las filas de la tabla y luego usar una función jQuery rápida para permitir al usuario ordenar la información por precio, nombre, etc. De esta manera, el la única tabla de diseño que me dará es el "orden vertical", pero controlaré el ancho, la altura, el fondo, etc. de los divs por CSS.



-4

Rompe la semántica , eso es todo. Funciona bien, pero puede haber lectores de pantalla o algo en el futuro que no disfrutará de procesar su HTML si "rompe la semántica".


13
@ Greg, ¿por qué rompe la semántica? Un div es simplemente una división de nivel de bloque, o subdivisión, del contenido de la página. Como tal, no es esencial e irrevocablemente antisentico colocarlos dentro de una celda de tabla.
David dice que reinstale a Monica el

2
Traté de escribirle varias respuestas que justificaran mi respuesta, pero seguí recurriendo a opiniones personales. : / Supongo que mi mejor respuesta sería que cualquier cosa que esté en su celda probablemente pueda estar mejor representada por otra etiqueta HTML. Si realmente está dividiendo sus celdas en componentes, probablemente no debería usar una tabla para empezar, debería diseñar una serie de DIV para su diseño. No estoy seguro de por qué no puedo poner esto en mejores palabras ... supongo que atribuírselo a mi humilde opinión.
Greg

Hmm, ¿quieres decir que un TD es semánticamente lo mismo que un DIV, entonces por qué tener dos de ellos en fila?
jcollum

2
@jcollum: No, no diría que son semánticamente iguales. TD es definitivamente una celda en una tabla; es parte de una estructura conocida: una tabla tiene filas, una fila tiene celdas, las celdas contienen datos. DIV es solo un contenedor ... puede representar cualquier cosa en cualquier momento en cualquier parte del documento; debe aplicarle estilo para obtener semántica en términos de propósito en el marcado.
Greg

77
Un DIV carece de sentido semántico, por lo que no veo cómo podría ser incorrecto.
Rex M
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.