Skip to main content
Validación HTML

El atributo “headers” en el elemento “td” hace referencia al ID X, pero no hay ningún elemento “th” con ese ID en la misma tabla.

Acerca de este problema HTML

El atributo headers crea asociaciones explícitas entre celdas de datos (td) y celdas de encabezado (th) en tablas complejas. Esto es especialmente importante para tablas con estructuras irregulares, como aquellas con celdas combinadas o múltiples niveles de encabezado, donde el navegador no puede determinar automáticamente qué encabezados se aplican a qué celdas de datos.

Cuando el validador reporta este error, significa que uno o más IDs referenciados en el atributo headers de un td no pueden coincidir con ningún elemento th con ese id en la misma tabla. Las causas comunes incluyen:

  • Errores tipográficos — Una pequeña falta de ortografía en el valor del headers o en el id del elemento th.
  • id faltante — El elemento th existe pero no tiene un atributo id asignado.
  • Encabezados eliminados o renombrados — El th fue eliminado o su id fue cambiado durante la refactorización, pero el td aún hace referencia al valor antiguo.
  • Referencias entre tablas — El th con el id referenciado existe en una <table> diferente, lo cual no está permitido.

Por qué esto importa

Este problema impacta directamente la accesibilidad. Los lectores de pantalla utilizan el atributo headers para anunciar qué celdas de encabezado están asociadas con una celda de datos. Cuando un ID referenciado no se resuelve a un th en la misma tabla, la tecnología asistiva no puede proporcionar este contexto, haciendo que la tabla sea confusa o inutilizable para usuarios que dependen de ella. Las referencias rotas de headers también indican HTML inválido según la especificación HTML de WHATWG, que requiere que cada token en el atributo headers coincida con el id de una celda th en la misma tabla.

Cómo solucionarlo

  1. Localiza el elemento td señalado por el validador y nota el ID al que hace referencia.
  2. Busca en la misma <table> un elemento th con un id que coincida.
  3. Si el th existe pero no tiene id o tiene un id diferente, agrega o corrige el atributo id para que coincida.
  4. Si el th fue eliminado, restáuralo o elimina el atributo headers del td.
  5. Verifica la sensibilidad a mayúsculas y minúsculas — los valores id de HTML son sensibles a mayúsculas, por lo que headers="Name" no coincide con id="name".

Ejemplos

Incorrecto: headers hace referencia a un ID inexistente

El primer td hace referencia a "product", pero ningún th tiene id="product". El segundo th tiene id="cost", pero el segundo td hace referencia a "price" — una falta de coincidencia.

<table>
  <tr>
    <th>Product</th>
    <th id="cost">Price</th>
  </tr>
  <tr>
    <td headers="product">Widget</td>
    <td headers="price">$9.99</td>
  </tr>
</table>

Correcto: cada valor de headers coincide con un th con el mismo id

<table>
  <tr>
    <th id="product">Product</th>
    <th id="cost">Price</th>
  </tr>
  <tr>
    <td headers="product">Widget</td>
    <td headers="cost">$9.99</td>
  </tr>
</table>

Correcto: múltiples encabezados en un solo td

En tablas complejas, una celda de datos puede relacionarse con más de un encabezado. Lista múltiples IDs separados por espacios — cada uno debe corresponder a un th en la misma tabla.

<table>
  <tr>
    <th id="region" rowspan="2">Region</th>
    <th id="q1" colspan="2">Q1</th>
  </tr>
  <tr>
    <th id="sales">Sales</th>
    <th id="returns">Returns</th>
  </tr>
  <tr>
    <td headers="region">North</td>
    <td headers="q1 sales">1200</td>
    <td headers="q1 returns">45</td>
  </tr>
</table>

Consejo: las tablas simples pueden no necesitar headers en absoluto

Para tablas sencillas con una sola fila de encabezados de columna, los navegadores y lectores de pantalla pueden inferir las asociaciones automáticamente. En esos casos, puedes omitir completamente el atributo headers y evitar esta clase de error:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

Reserva el atributo headers para tablas complejas donde la asociación automática sea insuficiente, como tablas con celdas que abarcan múltiples filas o columnas, o tablas con encabezados tanto en filas como en columnas.

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.