Tabelas HTML apresentam dados tabulares (linhas e colunas de dados relacionados) — não layout. Uma tabela acessível usa uma estrutura adequada para que leitores de tela possam anunciar cabeçalhos junto com cada célula.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> com scope — marca células de cabeçalho. scope="col" para cabeçalhos de coluna, scope="row" para cabeçalhos de linha. Os leitores de tela então anunciam "North, Revenue: $12,000" em vez de ler células sem contexto.<caption> — um título para toda a tabela, o primeiro filho de <table>; lido para orientar os usuários.<thead>/<tbody>/<tfoot> — agrupam linhas de cabeçalho, corpo e resumo; ajudam na navegação e permitem que o cabeçalho se repita ao imprimir.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tabelas de layout confundem leitores de tela (eles anunciam semântica de tabela de dados) e são inflexíveis. Use CSS Grid/Flexbox para layout de página.
A semântica de tabela adequada (<th scope>, <caption>, secionamento) é o que torna as tabelas de dados utilizáveis para usuários de leitores de tela — elas vinculam cada valor aos seus cabeçalhos de linha e coluna.
Reserve <table> estritamente para dados tabulares genuínos.