Skip to main content
Validação HTML

O atributo “headers” no elemento “td” refere-se ao ID X, mas não existe nenhum elemento “th” com esse ID na mesma tabela.

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 headers ou no id do elemento th.
  • id em falta — O elemento th existe mas não tem um atributo id atribuído.
  • Cabeçalhos removidos ou renomeados — O th foi eliminado ou o seu id foi alterado durante a refatorização, mas o td ainda referencia o valor antigo.
  • Referências entre tabelas — O th com o id referenciado 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

  1. Localize o elemento td sinalizado pelo validador e note o ID que referencia.
  2. Procure na mesma <table> por um elemento th com um id correspondente.
  3. Se o th existe mas não tem id ou tem um id diferente, adicione ou corrija o atributo id para que corresponda.
  4. Se o th foi removido, restaure-o ou remova o atributo headers do td.
  5. Verifique a sensibilidade a maiúsculas e minúsculas — os valores de id HTML são sensíveis a maiúsculas e minúsculas, portanto headers="Name" não corresponde a id="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.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.