Acerca de este problema HTML
En HTML, la estructura de una <table> se define implícitamente por sus filas y columnas. La primera <tr> en una tabla (o sección de tabla como <thead>, <tbody>, o <tfoot>) establece el recuento de columnas esperado para toda la tabla. Cuando una fila posterior contiene más celdas que la primera fila, el validador genera este error porque la cuadrícula de columnas de la tabla se vuelve inconsistente.
Los navegadores aún intentarán renderizar las tablas que no coinciden, pero los resultados pueden ser impredecibles y problemáticos. Los lectores de pantalla y otras tecnologías asistivas dependen de una cuadrícula de tabla bien formada para asociar correctamente las celdas de datos con sus encabezados. Un recuento de columnas inconsistente puede causar que estas herramientas lean mal o se salten contenido, haciendo que la tabla sea inaccesible para los usuarios que dependen de ellas. Además, las tablas inconsistentes son más difíciles de estilizar con CSS y pueden llevar a cambios de diseño inesperados.
Hay varias causas comunes para este problema:
-
Celdas faltantes en la primera fila — La primera fila tiene menos elementos
<td>o<th>que las filas posteriores. -
colspanolvidado — Una celda en la primera fila debería abarcar múltiples columnas pero le falta un atributocolspan. - Celdas extra en filas posteriores — Una fila más abajo en la tabla tiene más celdas de las previstas.
-
Aritmética de
colspanno coincidente — La suma de las celdas y sus valorescolspanno se suma de forma consistente entre las filas.
Para solucionarlo, revisa cada fila en la tabla y asegúrate de que el recuento total de columnas (teniendo en cuenta los atributos colspan y rowspan) sea el mismo para cada fila.
Ejemplos
Incorrecto: la segunda fila tiene más columnas que la primera
La primera fila define 1 columna, pero la segunda fila tiene 2 columnas.
<table>
<tr>
<td>Liza</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>
Solucionado: agregar las celdas faltantes a la primera fila
Hacer que ambas filas tengan 2 columnas agregando una celda de encabezado o de datos a la primera fila.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>
Solucionado: usar colspan si la primera fila intencionalmente abarca todo el ancho
Si la primera fila está destinada a ser un solo encabezado que abarca todo, usa colspan para que coincida con el recuento total de columnas.
<table>
<tr>
<th colspan="2">Student Info</th>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>
Incorrecto: una fila posterior excede el recuento de columnas con celdas extra
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Liza</td>
<td>12</td>
<td>Extra cell</td>
</tr>
</table>
Solucionado: eliminar la celda extra o expandir la fila de encabezado
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Notes</th>
</tr>
<tr>
<td>Liza</td>
<td>12</td>
<td>Extra cell</td>
</tr>
</table>
Incorrecto: la no coincidencia de colspan causa totales inconsistentes
La primera fila abarca 3 columnas en total (1 + colspan="2"), pero la segunda fila tiene 4 celdas.
<table>
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>Liza</td>
<td>liza@example.com</td>
<td>555-0100</td>
<td>Room 4</td>
</tr>
</table>
Solucionado: ajustar colspan o el recuento de celdas para que todas las filas coincidan
<table>
<tr>
<th>Name</th>
<th colspan="3">Contact & Location</th>
</tr>
<tr>
<td>Liza</td>
<td>liza@example.com</td>
<td>555-0100</td>
<td>Room 4</td>
</tr>
</table>
Al depurar este problema, cuenta las columnas efectivas para cada fila sumando el número de celdas más cualquier columna adicional contribuida por los valores colspan (una celda con colspan="3" cuenta como 3 columnas). Cada fila en la tabla debe producir el mismo total.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: