Acerca de este problema HTML
La especificación HTML requiere que cada fila en una tabla tenga al menos una celda que comience en esa fila. Una “celda que comienza en una fila” significa un elemento <td> o <th> que se coloca directamente en ese <tr>, en oposición a una celda que simplemente se extiende hacia ella a través de rowspan desde una fila anterior. Cuando el validador encuentra una fila sin celdas que comiencen en ella, señala el error porque la fila es estructuralmente sin sentido — no contribuye nada al modelo de datos de la tabla.
Este problema surge comúnmente en dos escenarios:
-
Elementos
<tr>vacíos — Un<tr>que no contiene ningún hijo<td>o<th>. Esto a veces aparece cuando los desarrolladores usan filas vacías para espaciado visual, o cuando los sistemas de gestión de contenido generan marcado sobrante. -
Filas completamente cubiertas por
rowspan— Cuando las celdas en filas precedentes usan valores derowspanlo suficientemente grandes como para extenderse sobre una fila subsiguiente completa, esa fila subsiguiente termina sin celdas que comiencen en ella, incluso si técnicamente “tiene” celdas pasando a través de ella.
Esto importa por varias razones. Los lectores de pantalla y otras tecnologías de asistencia dependen de una estructura de tabla bien formada para navegar por las celdas y anunciar su contenido. Una fila vacía o completamente extendida confunde esta navegación. Los navegadores también pueden manejar las tablas mal formadas de manera inconsistente, llevando a una renderización inesperada. Asegurar que cada fila tenga al menos una celda que comience en ella mantiene tus tablas semánticamente correctas y accesibles.
Cómo solucionarlo
-
Elimina las filas vacías. Si un
<tr>no tiene celdas y no sirve ningún propósito, elimínalo completamente. -
Añade celdas a la fila. Si la fila es intencional, llénala con elementos
<td>o<th>(pueden estar vacías si es necesario). -
Ajusta los valores de
rowspan. Si las celdas anteriores se extienden demasiadas filas, reduce surowspanpara que cada fila aún tenga al menos una celda propia. -
Usa CSS para el espaciado. Si las filas vacías se usaban para espaciado visual, usa CSS
margin,padding, oborder-spacingen su lugar.
Ten en cuenta que los elementos <tr /> auto-cerrados se tratan igual que <tr></tr> — producen una fila vacía y activarán este error.
Ejemplos
Fila vacía en <tbody> (incorrecto)
<table>
<tbody>
<tr>
</tr>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
El primer <tr> no tiene celdas, así que el validador reporta que la fila 1 del grupo de filas <tbody> no tiene celdas que comiencen en ella.
Fila vacía eliminada (correcto)
<table>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
Fila completamente cubierta por rowspan (incorrecto)
<table>
<tbody>
<tr>
<td rowspan="3">Spans three rows</td>
<td rowspan="3">Also spans three</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Las filas 2 y 3 no tienen celdas que comiencen en ellas — todas las celdas se originan en la fila 1. Incluso aunque las celdas pasen a través de esas filas vía rowspan, el validador aún requiere que al menos una celda comience en cada fila.
rowspan corregido con celdas en cada fila (correcto)
<table>
<tbody>
<tr>
<td rowspan="3">Spans three rows</td>
<td>Row 1 detail</td>
</tr>
<tr>
<td>Row 2 detail</td>
</tr>
<tr>
<td>Row 3 detail</td>
</tr>
</tbody>
</table>
Cada fila ahora tiene al menos un <td> que comienza en ella, satisfaciendo el requisito.
Usar CSS en lugar de filas vacías para espaciado (correcto)
<table>
<tbody>
<tr>
<td>First item</td>
</tr>
<tr style="height: 1.5em;">
<td>Second item with extra space above</td>
</tr>
</tbody>
</table>
En lugar de insertar una fila vacía para espaciado, aplica CSS a la fila o celdas que necesiten espacio adicional.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.