Uma tabela de dados comunica relações entre linhas e colunas. Se essas relações aparecem apenas pela posição ou pela cor, alguns leitores podem perder o contexto de cada célula. A marcação HTML deve indicar quais células são cabeçalhos e quais contêm dados.
Use tabela só para dados em grade
Não use <table> para organizar visualmente um layout de página; CSS é apropriado para apresentação. Para uma comparação real, uma agenda ou uma lista de especificações que tenha relações por linha e coluna, uma tabela semântica pode ser adequada.
<table>
<caption>Horários de atendimento</caption>
<thead>
<tr><th scope="col">Dia</th><th scope="col">Horário</th></tr>
</thead>
<tbody>
<tr><th scope="row">Segunda-feira</th><td>9h às 17h</td></tr>
<tr><th scope="row">Terça-feira</th><td>9h às 17h</td></tr>
</tbody>
</table>O tutorial da W3C WAI sobre tabelas explica <th>, <td>, scope e associações necessárias em estruturas mais complexas.
Dê contexto aos cabeçalhos
Use <th> nos cabeçalhos, <td> nos dados e <caption> para identificar o assunto quando isso ajuda a entender a grade. Em tabelas simples, associe cabeçalho de coluna ou linha com scope="col" e scope="row". Não simule cabeçalhos usando somente texto em negrito.
Se uma célula depender de vários níveis de cabeçalho, avalie dividir a informação em tabelas menores. Estruturas com vários cabeçalhos podem exigir id e headers, mas aumentam o esforço de criação e teste; evite usá-las quando uma reorganização torna a informação mais clara.
Verifique telas pequenas e ampliação
Abra a página em largura estreita e aumente o zoom. Confirme que a pessoa consegue associar cada dado ao cabeçalho correspondente. Se a tabela rolar horizontalmente, deixe isso perceptível e não esconda dados essenciais. Em alguns casos, cartões ou uma lista rotulada funcionam melhor do que tentar encaixar muitas colunas.
A WAI recomenda manter a estrutura da tabela mesmo quando o layout muda em telas menores e simplificar grades complexas sempre que possível (dicas para tabelas).
Teste a leitura
Use um leitor de tela para navegar por algumas células e confirme que cabeçalhos de linha e coluna dão contexto. Compare a ordem de leitura com o conteúdo visual. Se a tabela estiver dentro de um editor visual, inspecione o HTML resultante — a formatação visual do editor não comprova marcação semântica.
Este guia se aplica a tabelas de dados. Ele não declara conformidade automática; páginas com tabelas extensas ainda precisam de avaliação do conteúdo, navegação e comportamento responsivo.