Linhas, células e cabeçalhos
Uma tabela sem cabeçalhos marcados de verdade é ilegível para quem usa leitor de tela, e menos clara até para quem enxerga.
Estudar esta lição interativa →No exemplo da lição passada, todas as células eram <td> (table data, "dado da tabela"), inclusive a primeira linha, que deveria funcionar como cabeçalho. Visualmente isso pode até passar despercebido, mas para quem usa leitor de tela é um problema real: sem uma tag de cabeçalho de verdade, o leitor não tem como anunciar "coluna Preço" ao pousar numa célula de valor, porque, para o código, não existe diferença nenhuma entre cabeçalho e dado.
<thead> / <tbody>
Agrupam, respectivamente, a linha (ou linhas) de cabeçalho e o corpo de dados da tabela.
<th>
Table header: a célula de cabeçalho, no lugar de td, quando ela nomeia uma coluna ou uma linha.
scope
Atributo do th que diz se ele é cabeçalho de uma coluna (scope="col") ou de uma linha (scope="row"), amarrando explicitamente o vínculo.
<caption>
O título da tabela inteira, o primeiro filho dentro de table, funciona como o 'nome' que dá contexto a tudo.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Repare nos th com scope, tanto na linha de cabeçalho quanto na coluna de horários.
Um exemplo de produto real: um extrato bancário, uma grade de horários escolar, uma tabela de comparação de planos de internet, todos usam th com scope justamente para que um leitor de tela consiga anunciar, célula por célula, "Quarta, 08h, História" em vez de só "História" solto sem contexto nenhum.
Usar <td> em negrito (via CSS) em vez de <th> de verdade: visualmente parece igual, mas semanticamente não há cabeçalho nenhum ali. Esquecer o scope em tabelas mais complexas (com cabeçalho de linha e de coluna ao mesmo tempo), o que deixa ambíguo a qual das duas aquele th se refere. E esquecer o <caption>, perdendo a chance de dar um título claro à tabela logo de cara.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Troque os td do cabeçalho por th com scope="col".