Skip to main content
Validación HTML

Una fila de tabla tenía X columnas de ancho y excedió el recuento de columnas establecido por la primera fila (Y).

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.
  • colspan olvidado — Una celda en la primera fila debería abarcar múltiples columnas pero le falta un atributo colspan.
  • Celdas extra en filas posteriores — Una fila más abajo en la tabla tiene más celdas de las previstas.
  • Aritmética de colspan no coincidente — La suma de las celdas y sus valores colspan no 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 &amp; 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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.