PricingLoginStart free
HTML Academy · Aula

Estrutura thead, tbody e tfoot

Organizar as linhas da tabela em secções semânticas de cabeçalho, corpo e rodapé.

Aula 2 de 414 etapas

Estrutura thead, tbody e tfoot é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Seções de uma tabela

Uma tabela HTML completa tem três seções opcionais, mas recomendadas:

  • <thead> — linhas de cabeçalho
  • <tbody> — linhas do corpo (dados principais)
  • <tfoot> — linhas do rodapé (totais, resumos)

thead

O elemento <thead> envolve as linhas de cabeçalho:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

O elemento <tbody> envolve as principais linhas de dados:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

O elemento <tfoot> envolve as linhas do rodapé — normalmente totais ou resumos:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Tabela estruturada completa

Uma tabela completa com as três seções:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Por que usar thead/tbody/tfoot?

Benefícios da estrutura de tabelas:

  • Semântica — os leitores de tela entendem a diferença entre cabeçalho, dados e resumo
  • Seleção com CSS — estilize as seções de forma independente
  • Impressão — thead se repete em todas as páginas impressas
  • Rolagem — role o tbody de forma independente usando o overflow do CSS

tbody com rolagem

Faça apenas o corpo rolar enquanto o cabeçalho permanece fixo:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

tbody implícito

Se você omitir <tbody>, o navegador adicionará um automaticamente:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Vários elementos tbody

Uma tabela pode ter vários grupos <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Estilizando seções de tabelas

Selecione as seções com CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Comportamento dos leitores de tela

Com uma estrutura adequada de thead/tbody, os leitores de tela podem:

  • Anunciar os cabeçalhos das colunas como contexto para cada célula de dados
  • Navegar entre as seções (região do cabeçalho e região dos dados)
  • Informar aos usuários quantas linhas e colunas existem

Linhas de thead com várias linhas

Um thead pode ter várias linhas para cabeçalhos complexos:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Verificação rápida

Onde o tfoot normalmente aparece no código-fonte HTML em comparação com a tabela renderizada?

Responda na aula interativa

Resumo: thead, tbody e tfoot

Elementos essenciais da estrutura de tabelas:

  • <thead> — linhas de cabeçalho (repetidas na impressão)
  • <tbody> — linhas de dados (pode haver várias)
  • <tfoot> — linhas de resumo ou totais
  • Permite selecionar seções com CSS e ler tabelas de forma acessível
  • Escreva sempre tbody explicitamente, mesmo que os navegadores o adicionem
Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
40
Aulas
159
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Estrutura thead, tbody e tfoot” é grátis?

Sim — o texto completo de “Estrutura thead, tbody e tfoot” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Estrutura thead, tbody e tfoot”?

Organizar as linhas da tabela em secções semânticas de cabeçalho, corpo e rodapé. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Estrutura thead, tbody e tfoot”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. table, tr, td e th
  2. Estrutura thead, tbody e tfoot
  3. colspan e rowspan para abranger células
  4. Acessibilidade de tabelas: scope, summary e caption
← Voltar para HTML Academy