Acerca de este problema HTML
La especificación HTML define un modelo de contenido estricto para las tablas. El elemento <td> (datos de tabla) representa una sola celda que contiene datos, y solo puede aparecer como hijo de un elemento <tr>. Los elementos de sección de tabla como <tbody>, <thead>, y <tfoot> solo pueden contener elementos <tr> como hijos directos — no celdas <td> o <th> directamente. Cuando el validador encuentra una etiqueta de inicio <td> dentro del cuerpo de una tabla (u otra sección) sin un <tr> que la envuelva, reporta este error.
Este problema surge típicamente en algunos escenarios comunes:
-
Falta un envoltorio
<tr>— el desarrollador colocó celdas directamente dentro de<tbody>o<table>sin crear una fila. -
Un
<tr>cerrado prematuramente — un error tipográfico o una etiqueta</tr>perdida terminó la fila demasiado pronto, dejando los elementos<td>subsiguientes huérfanos. -
HTML generado dinámicamente — los motores de plantillas o JavaScript pueden producir marcado de tabla donde los elementos
<tr>se omiten accidentalmente.
Por qué esto importa
-
Cumplimiento de estándares: El estándar HTML vigente requiere explícitamente que los elementos
<td>sean hijos de<tr>. Violar esto produce marcado inválido. -
Inconsistencia del navegador: Los navegadores intentarán corregir errores creando implícitamente elementos
<tr>, pero diferentes navegadores pueden interpretar la estructura mal formada de manera diferente, llevando a renderizado impredecible. -
Accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de la estructura correcta de la tabla para navegar filas y columnas. Los elementos
<tr>faltantes pueden confundir estas herramientas, haciendo que los datos sean más difíciles o imposibles de entender para los usuarios que dependen de ellas. - Mantenibilidad: El marcado de tabla inválido es más difícil de estilizar con CSS y más difícil para otros desarrolladores de entender y mantener.
Ejemplos
Incorrecto — <td> directamente dentro de <tbody>
Los elementos <td> son hijos de <tbody> en lugar de estar envueltos en un <tr>:
<table>
<tbody>
<td>Name</td>
<td>Age</td>
</tbody>
</table>
Correcto — <td> envuelto en <tr>
Agregar un elemento <tr> crea una fila de tabla válida:
<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</tbody>
</table>
Incorrecto — <tr> cerrado prematuramente deja celdas huérfanas
Aquí el primer </tr> cierra la fila demasiado pronto, así que el segundo <td> termina directamente dentro de <tbody>:
<table>
<tbody>
<tr>
<td>Cell 1</td>
</tr>
<td>Cell 2</td>
<td>Cell 3</td>
</tbody>
</table>
Correcto — todas las celdas colocadas dentro de filas adecuadas
Incluye todas las celdas en una fila, o crea múltiples filas según sea necesario:
<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
O, si querías dos filas separadas:
<table>
<tbody>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
Incorrecto — <td> directamente dentro de <table> sin secciones o filas
<table>
<td>Alpha</td>
<td>Beta</td>
</table>
Correcto — estructura de tabla válida mínima
Aunque <tbody> es opcional (los navegadores lo agregan implícitamente), un <tr> siempre es requerido:
<table>
<tr>
<td>Alpha</td>
<td>Beta</td>
</tr>
</table>
Para corregir este error, inspecciona tu marcado de tabla y asegúrate de que cada elemento <td> (y <th>) sea hijo directo de un <tr>. Verifica si hay etiquetas de cierre </tr> perdidas que puedan terminar filas prematuramente, y confirma que cualquier contenido de tabla generado dinámicamente produzca envoltorios <tr> alrededor de los elementos de celda.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.