Validación HTML: Una fila de tabla tenía X columnas de ancho, que es menos que el número de columnas establecido por la primera fila (Y).

Acerca de este problema HTML

Las tablas HTML establecen su número de columnas basándose en la primera fila. Cuando las filas posteriores tienen menos celdas <td> o <th> de las que define esa fila inicial, la estructura de la tabla se vuelve inválida. Los navegadores típicamente renderizan estas tablas dejando espacio en blanco donde deberían estar las celdas faltantes, pero el marcado subyacente está mal formado.

Esto importa por varias razones importantes. Los lectores de pantalla y otras tecnologías de asistencia dependen de una estructura de tabla consistente para navegar por las celdas y asociar datos con los encabezados correctos. Cuando faltan celdas, los usuarios que dependen de estas herramientas pueden recibir información confusa o incorrecta. Además, los anchos de fila inconsistentes pueden llevar a comportamientos de diseño impredecibles entre diferentes navegadores y hacer que el marcado de tu tabla sea más difícil de mantener.

Al contar columnas, recuerda que el atributo colspan contribuye al total. Un solo <td colspan="3"> cuenta como tres columnas, no una. Así que si tu primera fila tiene dos elementos <td> y uno de ellos tiene colspan="2", la tabla tiene tres columnas de ancho, y todas las demás filas también deben considerar tres columnas.

Cómo solucionarlo

Hay varios enfoques dependiendo de tu intención:

Añade las celdas faltantes — Si se omitieron datos accidentalmente, añade los elementos <td> o <th> apropiados para completar la fila.
Usa colspan — Si una celda debería abarcar intencionalmente múltiples columnas, usa el atributo colspan para que el número total de columnas coincida.
Añade celdas vacías — Si una celda simplemente no tiene contenido, incluye un <td></td> vacío para mantener la estructura.

Ejemplos

❌ Fila con menos columnas que la primera fila

La primera fila establece una tabla de 3 columnas, pero la segunda fila solo tiene 2 celdas:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
  </tr>
</table>

✅ Solución añadiendo la celda faltante

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
    <td>Product</td>
  </tr>
</table>

✅ Solución usando `colspan` para abarcar las columnas restantes

Si la segunda fila intencionalmente tiene menos celdas lógicas, usa colspan para que el total aún coincida:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td colspan="2">Engineer — General</td>
  </tr>
</table>

✅ Solución añadiendo una celda vacía

Si simplemente no hay datos para esa columna, incluye una celda vacía:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
    <td></td>
  </tr>
</table>

❌ Discrepancia causada por `colspan` en la primera fila

Ten cuidado cuando la primera fila usa colspan, ya que aumenta el número efectivo de columnas:

<table>
  <tr>
    <td colspan="2">Full Name</td>
    <td>Role</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
  </tr>
</table>

Aquí la primera fila abarca 3 columnas (2 + 1), pero la segunda fila solo tiene 2 celdas.

✅ Solución igualando el número total de columnas

<table>
  <tr>
    <td colspan="2">Full Name</td>
    <td>Role</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Smith</td>
    <td>Engineer</td>
  </tr>
</table>