Acerca de este problema HTML
Cuando una celda de tabla usa colspan para abarcar múltiples columnas, la especificación HTML requiere que las columnas que se abarcan realmente existan y estén contempladas en la estructura de columnas de la tabla. Si el colspan de una celda crea columnas en las que ninguna otra fila tiene celdas que comiencen, el validador marca esas columnas vacías. Por ejemplo, si tu fila más ancha tiene 3 columnas pero otra fila contiene una celda con colspan="6", las columnas 4 a 6 son establecidas por esa celda pero son esencialmente columnas fantasma — ninguna celda en ninguna otra fila comienza en ellas.
Esto importa por varias razones. Los lectores de pantalla y las tecnologías de asistencia dependen de una estructura de tabla coherente para navegar por las celdas y anunciar las relaciones columna/fila. Un recuento de columnas inconsistente puede confundir estas herramientas, llevando a una mala experiencia para los usuarios que dependen de ellas. Los navegadores pueden renderizar la tabla sin errores visibles, pero la estructura subyacente es inválida, lo que puede causar un comportamiento impredecible del diseño en diferentes motores de renderizado.
Cómo solucionarlo
-
Identifica la fila problemática. Busca elementos
<td>o<th>cuyo valor decolspancree más columnas de las que define el resto de la tabla. -
Reduce el valor de
colspanpara que coincida con el número real de columnas en la tabla. - Alternativamente, añade celdas a otras filas si realmente necesitas más columnas — asegúrate de que cada columna tenga al menos una celda que comience en ella.
Una buena regla general: el colspan de cualquier celda, combinado con su posición de columna inicial, nunca debería exceder el recuento total de columnas de la tabla.
Ejemplos
Incorrecto: colspan excede el recuento de columnas de la tabla
Esta tabla tiene 2 columnas (establecidas por la primera fila), pero el colspan="5" de la segunda fila trata de abarcar 5 columnas. Las columnas 3 a 5 no tienen celdas que comiencen en ellas en ninguna fila.
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td colspan="5">Spans too many columns</td>
</tr>
</table>
Correcto: colspan coincide con el recuento de columnas de la tabla
Establece el colspan a 2 para que la celda abarque exactamente las columnas que existen.
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td colspan="2">Spans both columns</td>
</tr>
</table>
Incorrecto: filas mixtas con recuentos de columnas no coincidentes
Aquí la primera fila establece 3 columnas, pero la segunda fila crea una celda que comienza en la columna 1 y abarca 5 columnas, dejando las columnas 4 y 5 sin celdas que comiencen en ellas.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="5">Too wide</td>
</tr>
</table>
Correcto: expande la tabla o reduce el span
Opción A: Reduce el colspan para que coincida con las 3 columnas existentes.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="3">Spans all three columns</td>
</tr>
</table>
Opción B: Si realmente necesitas 5 columnas, añade celdas a las otras filas para que cada columna tenga una celda que comience en ella.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td colspan="5">Spans all five columns</td>
</tr>
</table>
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.