Tabelas

Tabelas mostram dados tabulares: preços fictícios de oficinas, tiragens de cartazes, horários. Não use tabela para desenhar o layout da página inteira.

O exemplo deste capítulo é 11-tabelas, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Montar table, thead, tbody, tr, th, td.
• Associar cabeçalhos com scope.
• Escrever caption descritiva.
• Conhecer colspan/rowspan com parcimônia.
• Reconhecer tabela de layout como erro antigo.

Estrutura mínima

<table>
  <caption>Oficinas de setembro (fictícias)</caption>
  <thead>
    <tr>
      <th scope="col">Oficina</th>
      <th scope="col">Duração</th>
      <th scope="col">Vagas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Composição</th>
      <td>4 h</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

th é cabeçalho; td é dado. scope="col" ou scope="row" deixa a relação explícita.

Caption

A caption nomeia a tabela. É o primeiro filho da table. Não substitua só por um h2 solto se a tabela precisa de nome próprio — os dois podem coexistir na página com boa hierarquia.

Células mescladas

colspan e rowspan unem células. Úteis em cabeçalhos complexos; perigosos se exagerados. Prefira tabelas simples no volume.

Quando não usar tabela

Layout de colunas do site → CSS (Flexbox/Grid na faixa CSS). Lista de links → ul. Comparações de dados com linhas e colunas → tabela.

Erro comum: tabela só com td, sem th, sem caption. Ou copiar layout de newsletter antigo com tabelas aninhadas.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tabelas — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Tiragens do ateliê</h1>
      <table>
        <caption>Cartazes impressos neste semestre (dados fictícios)</caption>
        <thead>
          <tr>
            <th scope="col">Título</th>
            <th scope="col">Técnica</th>
            <th scope="col">Exemplares</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Aurora vermelha</th>
            <td>Serigrafia</td>
            <td>80</td>
          </tr>
          <tr>
            <th scope="row">Tipos da Ribeira</th>
            <td>Tipografia móvel</td>
            <td>40</td>
          </tr>
          <tr>
            <th scope="row">Noite no cais</th>
            <td>Linoleogravura</td>
            <td>25</td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>

Troque um th de coluna por td e preveja: a célula deixa de ser anunciada como cabeçalho.

Responsividade (aviso)

Tabelas largas em celular pedem estratégia de CSS (scroll, empilhamento). Neste capítulo o HTML precisa estar correto; o refinamento visual vem depois.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual a diferença entre th e td?
2. Para que serve scope="row" no exemplo?
3. Por que não montar o layout do site inteiro com table?

Respostas comentadas

1. th marca cabeçalho; td marca dado. A distinção importa para semântica e acessibilidade.
2. Indica que aquele th rotula a linha inteira (nome do cartaz), não a coluna.
3. Porque tabela é para dados tabulares. Layout com tabela atrapalha reflow, manutenção e acessibilidade; CSS resolve posicionamento.