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
headerso en eliddel elementoth. -
idfaltante — El elementothexiste pero no tiene un atributoidasignado. -
Encabezados eliminados o renombrados — El
thfue eliminado o suidfue cambiado durante la refactorización, pero eltdaún hace referencia al valor antiguo. -
Referencias entre tablas — El
thcon elidreferenciado 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
-
Localiza el elemento
tdseñalado por el validador y nota el ID al que hace referencia. -
Busca en la misma
<table>un elementothcon unidque coincida. -
Si el
thexiste pero no tieneido tiene uniddiferente, agrega o corrige el atributoidpara que coincida. -
Si el
thfue eliminado, restáuralo o elimina el atributoheadersdeltd. -
Verifica la sensibilidad a mayúsculas y minúsculas — los valores
idde HTML son sensibles a mayúsculas, por lo queheaders="Name"no coincide conid="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.