Tabelas em HTML

Dados sem estrutura são ruído

Uma tabela bem construída permite que humanos, motores de busca e tecnologias assistivas entendam informações complexas em segundos. O Mestre não usa tabela para desenhar tela; usa tabela para honrar dados tabulares.

table, tr, td e th

• table: contêiner principal da tabela.
• tr: linha da tabela.
• td: célula comum de dado.
• th: célula de cabeçalho, usada para contexto.

<table>
  <tr>
    <th>Produto</th>
    <th>Preço</th>
  </tr>
  <tr>
    <td>Café</td>
    <td>R$ 15,00</td>
  </tr>
</table>

caption, thead, tbody e tfoot

Uma tabela profissional separa contexto, cabeçalho, corpo e resumo. Essa separação melhora manutenção, leitura, SEO e acessibilidade.

<table>
  <caption>Relatório Trimestral de Vendas - 2024</caption>

  <thead>
    <tr>
      <th scope="col">Produto</th>
      <th scope="col">Quantidade</th>
      <th scope="col">Preço Unitário</th>
      <th scope="col">Total</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Notebook Mestre</th>
      <td>10</td>
      <td>R$ 4.500</td>
      <td>R$ 45.000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Venda Total Bruta</td>
      <td>R$ 45.000</td>
    </tr>
  </tfoot>
</table>

scope dá voz aos dados

Leitores de tela relacionam cada dado ao cabeçalho correto. O atributo scope informa se o cabeçalho pertence a uma coluna ou linha.

• scope="col": cabeçalho de coluna.
• scope="row": cabeçalho de linha.

Tabelas sem amadorismo

• Use tabela somente para dados tabulares.
• Nunca use tabela para layout visual.
• Use caption quando a tabela precisar de contexto.
• Use th para cabeçalhos, não td com negrito.
• Use thead, tbody e tfoot em tabelas profissionais.
• Use scope para fortalecer acessibilidade.
• Mantenha consistência no número de células por linha.
• Evite tabelas gigantes sem planejamento.
• Use CSS para aparência, não para corrigir HTML ruim.

15 perguntas para provar domínio

1. Função da tag table? Iniciar e finalizar uma estrutura de dados tabulares.
2. O que representa tr? Uma linha da tabela.
3. Diferença entre th e td? th é cabeçalho/contexto; td é dado comum.
4. Por que usar thead, tbody e tfoot? Para separar seções lógicas da tabela.
5. Onde fica caption? Logo após a abertura da table.
6. Para que serve scope? Indicar se o cabeçalho se refere a coluna ou linha.
7. Por que não usar tabela para layout? Porque compromete semântica, SEO e acessibilidade.
8. O que é tabela aninhada? Uma tabela dentro de uma célula de outra tabela.
9. Tag do rodapé da tabela? tfoot.
10. Como leitores de tela usam tabelas? Relacionam dados aos cabeçalhos.
11. Tabelas ajudam SEO? Sim, quando organizam dados comparativos.
12. td fora de tr é válido? Não.
13. Uma tabela pode ter múltiplos tbody? Sim, para agrupar conjuntos de dados.
14. Células aceitam links e imagens? Sim.
15. Quando usar lista no lugar de tabela? Quando os dados não são bidimensionais.

Registre sua tabela profissional

git status
git add .
git commit -m "aula-20: cria tabela profissional de dados html"
git push

• git status: verifica arquivos modificados.
• git add .: adiciona as mudanças à área de preparação.
• git commit: cria o marco histórico da aula.
• git push: envia seu avanço para o repositório remoto.