Sobre este problema HTML
O atributo headers cria associações explícitas entre células de dados (td) e células de cabeçalho (th) em tabelas complexas. Isto é especialmente importante para tabelas com estruturas irregulares—como aquelas com células mescladas ou múltiplos níveis de cabeçalho—onde o navegador não consegue determinar automaticamente quais cabeçalhos se aplicam a quais células de dados.
Quando o validador reporta este erro, significa que um ou mais IDs referenciados no atributo headers de um td não podem ser correspondidos a nenhum elemento th com esse id na mesma tabela. As causas comuns incluem:
-
Erros de digitação — Um pequeno erro ortográfico no valor de
headersou noiddo elementoth. -
idem falta — O elementothexiste mas não tem um atributoidatribuído. -
Cabeçalhos removidos ou renomeados — O
thfoi eliminado ou o seuidfoi alterado durante a refatorização, mas otdainda referencia o valor antigo. -
Referências entre tabelas — O
thcom oidreferenciado existe numa<table>diferente, o que não é permitido.
Por que isto é importante
Este problema impacta diretamente a acessibilidade. Os leitores de ecrã usam o atributo headers para anunciar quais células de cabeçalho estão associadas a uma célula de dados. Quando um ID referenciado não resolve para um th na mesma tabela, as tecnologias assistivas não conseguem fornecer este contexto, tornando a tabela confusa ou inutilizável para utilizadores que dependem dela. Referências de headers quebradas também indicam HTML inválido de acordo com a especificação HTML do WHATWG, que requer que cada token no atributo headers corresponda ao id de uma célula th na mesma tabela.
Como corrigir
-
Localize o elemento
tdsinalizado pelo validador e note o ID que referencia. -
Procure na mesma
<table>por um elementothcom umidcorrespondente. -
Se o
thexiste mas não temidou tem umiddiferente, adicione ou corrija o atributoidpara que corresponda. -
Se o
thfoi removido, restaure-o ou remova o atributoheadersdotd. -
Verifique a sensibilidade a maiúsculas e minúsculas — os valores de
idHTML são sensíveis a maiúsculas e minúsculas, portantoheaders="Name"não corresponde aid="name".
Exemplos
Incorreto: headers referencia um ID inexistente
O primeiro td referencia "product", mas nenhum th tem id="product". O segundo th tem id="cost", mas o segundo td referencia "price" — uma incompatibilidade.
<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>
Correto: cada valor de headers corresponde a um th com o mesmo 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>
Correto: múltiplos cabeçalhos num único td
Em tabelas complexas, uma célula de dados pode relacionar-se com mais do que um cabeçalho. Liste múltiplos IDs separados por espaços — cada um deve corresponder a um th na mesma tabela.
<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>
Dica: tabelas simples podem não precisar de headers
Para tabelas simples com uma única linha de cabeçalhos de coluna, os navegadores e leitores de ecrã podem inferir as associações automaticamente. Nesses casos, pode omitir completamente o atributo headers e evitar esta classe de erro:
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Widget</td>
<td>$9.99</td>
</tr>
</table>
Reserve o atributo headers para tabelas complexas onde a associação automática é insuficiente — como tabelas com células que abrangem múltiplas linhas ou colunas, ou tabelas com cabeçalhos tanto em linhas como em colunas.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.