Skip to main content
Validación HTML

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

Acerca de este problema HTML

Cuando los navegadores construyen la cuadrícula interna de una tabla, cada celda ocupa uno o más espacios de columna. Una celda con colspan="3" ocupa tres espacios de columna, y las columnas se establecen basándose en el número máximo de espacios que cualquier fila use. El validador verifica que cada posición de columna en esta cuadrícula tenga al menos una celda cuya posición inicial esté en esa columna. Si una columna existe solo porque otras celdas se extienden a través de ella — pero ninguna celda nunca comienza ahí — el validador levanta esta advertencia.

Esto es un problema por varias razones:

  • Accesibilidad: Los lectores de pantalla utilizan el modelo de cuadrícula de tabla para navegar por las celdas y anunciar los encabezados de columna. Una columna vacía o huérfana confunde esta navegación, haciendo que la tabla sea más difícil de entender para los usuarios de tecnología asistiva.
  • Cumplimiento de estándares: La especificación HTML define un modelo de tabla preciso. Una columna sin celda de origen sugiere un error estructural en el marcado de la tabla.
  • Inconsistencias de renderizado: Diferentes navegadores pueden manejar estas columnas huérfanas de manera diferente, llevando a diseños impredecibles.

Las causas más comunes son:

  1. Valores excesivos de colspan — una celda se extiende a más columnas de las previstas, creando columnas adicionales que otras filas no llenan.
  2. Celdas faltantes en una fila — una fila tiene menos celdas que el recuento de columnas de la tabla, dejando columnas finales vacías.
  3. Cálculos incorrectos de rowspan — una celda se extiende a través de filas, pero las filas subsecuentes aún incluyen celdas para esa posición de columna, empujando otras celdas hacia columnas inexistentes o dejando huecos.

Para solucionar el problema, cuenta el número total de columnas que tu tabla debería tener, luego verifica que las celdas de cada fila (considerando colspan y rowspan activos de filas anteriores) sumen exactamente ese número. Asegúrate de que cada posición de columna tenga al menos una celda que comience en ella a través de todas las filas.

Ejemplos

Incorrecto: colspan crea una columna en la que ninguna celda comienza

En este ejemplo, la primera fila establece 3 columnas. La segunda fila se extiende por las 3 con colspan="3". La tercera fila solo tiene 2 celdas, entonces la columna 3 no tiene celda que comience en ella.

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
    <th>Status</th>
  </tr>
  <tr>
    <td colspan="3">Team Alpha</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Developer</td>
<!-- Column 3 has no cell beginning here -->

  </tr>
</table>

Corregido: cada fila considera todas las columnas

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
    <th>Status</th>
  </tr>
  <tr>
    <td colspan="3">Team Alpha</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Developer</td>
    <td>Active</td>
  </tr>
</table>

Incorrecto: colspan excesivo crea columnas adicionales

Aquí, el colspan="4" de la segunda fila establece 4 columnas, pero ninguna otra fila tiene una celda que comience en la columna 4.

<table>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td colspan="4">Full year summary</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Corregido: colspan coincide con el recuento real de columnas

<table>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td colspan="3">Full year summary</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Incorrecto: rowspan causa un origen de celda faltante

El rowspan="2" en “Alice” significa que la segunda fila ya tiene la columna 1 ocupada. Pero la segunda fila solo proporciona una celda, dejando la columna 3 sin una celda inicial en ninguna fila excepto el encabezado.

<table>
  <tr>
    <th>Name</th>
    <th>Task</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Design</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Code</td>
<!-- Column 1 is occupied by rowspan; column 3 has no cell -->

  </tr>
</table>

Corregido: la fila con extensión incluye el número correcto de celdas

Como rowspan="2" en la columna 1 se extiende a la siguiente fila, esa fila solo necesita celdas para las columnas 2 y 3.

<table>
  <tr>
    <th>Name</th>
    <th>Task</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Design</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Code</td>
    <td>6</td>
  </tr>
</table>

Una buena práctica es bosquejar tu cuadrícula de tabla en papel o en una hoja de cálculo antes de escribir el HTML. Etiqueta cada espacio de columna y verifica que cada fila llene todos los espacios — ya sea con una celda nueva o con una extensión de rowspan de una fila anterior. Esto hace mucho más fácil detectar valores de colspan y rowspan no coincidentes antes de que causen errores de validación.

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.