Skip to main content
Validación HTML

La columna N de la tabla establecida por el elemento “th” no tiene celdas que comiencen en ella.

Acerca de este problema HTML

La especificación HTML requiere que las estructuras de tabla sean coherentes: cada columna en una tabla debe ser “utilizada” por al menos una celda que comience en ella. Cuando declaras un <th> con colspan="2", le estás diciendo al navegador que la tabla tiene (al menos) dos columnas. Si las filas del cuerpo no proporcionan celdas para llenar esas columnas, la estructura de la tabla se vuelve inconsistente.

Esto importa por varias razones. Los lectores de pantalla y otras tecnologías de asistencia dependen de una cuadrícula de tabla bien formada para navegar y anunciar el contenido de las celdas. Una estructura de columnas inconsistente puede confundir estas herramientas, llevando a una experiencia deficiente para los usuarios que dependen de ellas. Los navegadores también pueden renderizar tales tablas de forma impredecible, ya que tienen que adivinar cómo manejar la discrepancia.

Las causas comunes de este error incluyen:

  • Un valor colspan en una celda de encabezado que excede el número real de celdas en las filas del cuerpo.
  • Secciones <tbody>, <thead>, o <tfoot> vacías que dejan columnas declaradas sin ninguna celda.
  • Filas con menos celdas que las que definen otras filas, dejando algunas columnas desocupadas.
  • Errores de copiar-pegar o problemas de plantilla donde se eliminaron filas pero los encabezados se dejaron sin cambios.

Para solucionarlo, examina la estructura de columnas de tu tabla. Cuenta el número total de columnas implícito en cada fila (teniendo en cuenta los atributos colspan y rowspan) y asegúrate de que cada fila esté de acuerdo en el conteo total de columnas. Cada columna debe tener al menos una celda que comience en ella en algún lugar de la tabla.

Ejemplos

Incorrecto: colspan crea columnas sin celdas coincidentes en el cuerpo

Aquí, el encabezado declara dos columnas, pero el cuerpo está vacío, por lo que la columna 2 no tiene celdas que comiencen en ella:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Incorrecto: Las filas del cuerpo tienen menos celdas que las que define el encabezado

El encabezado abarca tres columnas, pero las filas del cuerpo solo tienen dos celdas cada una. La columna 3 no tiene celdas que comiencen en ella:

<table>
  <thead>
    <tr>
      <th colspan="3">Wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Correcto: Las celdas del cuerpo coinciden con las columnas definidas por el encabezado

El encabezado abarca dos columnas, y la fila del cuerpo proporciona exactamente dos celdas:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

Correcto: Encabezado de tres columnas con celdas del cuerpo coincidentes

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Correcto: Uso de colspan en filas del cuerpo para llenar todas las columnas

Si necesitas menos celdas visibles en una fila del cuerpo, usa colspan para abarcar las columnas restantes en lugar de dejarlas vacías:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td colspan="2">Info unavailable</td>
    </tr>
  </tbody>
</table>

Correcto: Reducir colspan para coincidir con el contenido real

Si el encabezado realmente no necesita abarcar múltiples columnas, simplemente elimina el colspan:

<table>
  <thead>
    <tr>
      <th>The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
    </tr>
  </tbody>
</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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

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