Cabeçalho, corpo e rodapé da tabela: thead, tbody e tfoot

Aprenda a dividir semanticamente a tabela em regiões, tornando-a mais organizada e fácil de estilizar.

Na lição anterior, você aprendeu a estrutura básica de uma tabela com <table>, <tr>, <td> e <th>. Agora vamos adicionar uma camada extra de semântica e organização: as tags que dividem a tabela em seções lógicas — cabeçalho, corpo e rodapé.

Essas tags não alteram a aparência padrão da tabela, mas são cruciais para a acessibilidade, a estilização com CSS e o comportamento em tabelas longas.

As três tags de agrupamento

Tag Nome completo Papel
<thead> table head Agrupa as linhas de cabeçalho
<tbody> table body Agrupa as linhas de dados
<tfoot> table foot Agrupa as linhas de rodapé

thead: agrupando o cabeçalho

O <thead> agrupa todas as linhas que contêm os cabeçalhos das colunas da tabela. Ele deve vir logo após a tag <table>.

<table>
  <thead>
    <tr>
      <th>Produto</th>
      <th>Quantidade</th>
      <th>Preço Unitário</th>
      <th>Total</th>
    </tr>
  </thead>
  <!-- tbody e tfoot virão aqui -->
</table>

Por que usar thead?

  • Semântica: informa a navegadores e leitores de tela que essas linhas são cabeçalhos, não dados.
  • Acessibilidade: leitores de tela podem repetir o cabeçalho da tabela para o usuário ao navegar por tabelas muito longas, mantendo o contexto.
  • Estilização: permite aplicar estilos CSS específicos ao cabeçalho da tabela (ex: thead { background-color: #eee; }).
  • Impressão: em tabelas que se estendem por várias páginas na impressão, o cabeçalho (<thead>) pode ser repetido automaticamente em cada nova página.

tbody: agrupando o corpo da tabela

O <tbody> agrupa todas as linhas que contêm os dados principais da tabela. Ele deve vir após o <thead> (se houver) e antes do <tfoot> (se houver).

<table>
  <thead>
    <tr>
      <th>Produto</th>
      <th>Quantidade</th>
      <th>Preço Unitário</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook Gamer</td>
      <td>1</td>
      <td>R$ 5.000,00</td>
      <td>R$ 5.000,00</td>
    </tr>
    <tr>
      <td>Mouse sem fio</td>
      <td>2</td>
      <td>R$ 150,00</td>
      <td>R$ 300,00</td>
    </tr>
    <tr>
      <td>Teclado mecânico</td>
      <td>1</td>
      <td>R$ 400,00</td>
      <td>R$ 400,00</td>
    </tr>
  </tbody>
  <!-- tfoot virá aqui -->
</table>

Por que usar tbody?

  • Semântica: define claramente a seção de dados da tabela.
  • Estilização: permite aplicar estilos CSS específicos ao corpo da tabela (ex: tbody tr:nth-child(even) { background-color: #f9f9f9; }).
  • JavaScript: facilita a manipulação de dados via JavaScript, pois você pode selecionar e modificar apenas as linhas de dados.
  • Rolagem: em tabelas muito longas, é possível fazer o <tbody> rolar independentemente do <thead> e <tfoot> com CSS, mantendo o cabeçalho e rodapé fixos.

tfoot: agrupando o rodapé

O <tfoot> agrupa as linhas que contêm resumos, totais ou informações adicionais relacionadas aos dados da tabela. Ele deve vir após o <tbody>.

<table>
  <thead>
    <tr>
      <th>Produto</th>
      <th>Quantidade</th>
      <th>Preço Unitário</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook Gamer</td>
      <td>1</td>
      <td>R$ 5.000,00</td>
      <td>R$ 5.000,00</td>
    </tr>
    <tr>
      <td>Mouse sem fio</td>
      <td>2</td>
      <td>R$ 150,00</td>
      <td>R$ 300,00</td>
    </tr>
    <tr>
      <td>Teclado mecânico</td>
      <td>1</td>
      <td>R$ 400,00</td>
      <td>R$ 400,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total Geral</td>
      <td>R$ 5.700,00</td>
    </tr>
  </tfoot>
</table>

Por que usar tfoot?

  • Semântica: informa a navegadores e leitores de tela que essas linhas são um rodapé da tabela.
  • Acessibilidade: leitores de tela podem identificar claramente as informações de resumo.
  • Estilização: permite aplicar estilos CSS específicos ao rodapé da tabela (ex: tfoot { font-weight: bold; }).
  • Impressão: em tabelas que se estendem por várias páginas na impressão, o rodapé (<tfoot>) pode ser repetido automaticamente em cada nova página, logo após o cabeçalho.

A ordem dos elementos: thead, tbody, tfoot

A ordem semântica correta é sempre:

  1. <thead>
  2. <tbody>
  3. <tfoot>
<table>
  <thead>
    <!-- Linhas de cabeçalho -->
  </thead>
  <tbody>
    <!-- Linhas de dados -->
  </tbody>
  <tfoot>
    <!-- Linhas de rodapé -->
  </tfoot>
</table>

⚠️ Importante: Embora a ordem visual seja cabeçalho, corpo, rodapé, o HTML permite que o <tfoot> seja declarado antes do <tbody> no código-fonte. Isso é uma prática antiga para permitir que o navegador renderize o rodapé antes de ter todos os dados do corpo, mas é desencorajado para a maioria dos casos modernos. Mantenha a ordem lógica <thead>, <tbody>, <tfoot> no código para maior clareza e semântica.

Exemplo completo: Tabela de Vendas Mensais

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Relatório de Vendas</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    thead th {
      background-color: #f2f2f2;
      font-weight: bold;
      color: #333;
    }

    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tfoot td {
      background-color: #e0e0e0;
      font-weight: bold;
      color: #555;
    }

    tfoot td:last-child {
      text-align: right;
    }
  </style>
</head>
<body>

  <h1>Relatório de Vendas Mensais</h1>

  <table>
    <thead>
      <tr>
        <th>Mês</th>
        <th>Vendas Brutas</th>
        <th>Descontos</th>
        <th>Vendas Líquidas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Janeiro</td>
        <td>R$ 10.000,00</td>
        <td>R$ 500,00</td>
        <td>R$ 9.500,00</td>
      </tr>
      <tr>
        <td>Fevereiro</td>
        <td>R$ 12.000,00</td>
        <td>R$ 600,00</td>
        <td>R$ 11.400,00</td>
      </tr>
      <tr>
        <td>Março</td>
        <td>R$ 15.000,00</td>
        <td>R$ 750,00</td>
        <td>R$ 14.250,00</td>
      </tr>
      <tr>
        <td>Abril</td>
        <td>R$ 11.000,00</td>
        <td>R$ 550,00</td>
        <td>R$ 10.450,00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total Acumulado</td>
        <td>R$ 45.600,00</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

Resumindo

  • <thead> → agrupa as linhas de cabeçalho (<th>)
  • <tbody> → agrupa as linhas de dados (<td>)
  • <tfoot> → agrupa as linhas de rodapé (totais, resumos)
  • A ordem semântica no código é <thead>, <tbody>, <tfoot>
  • Essas tags são cruciais para acessibilidade, estilização e manipulação com JavaScript
  • Elas não alteram a aparência padrão da tabela, mas permitem maior controle via CSS