Tag HTML <tfoot>

A tag <tfoot> define o rodapé de uma tabela HTML. É usada em conjunto com os elementos <thead> e <tbody>, que agrupam respectivamente o cabeçalho e as linhas do corpo da tabela.

O rodapé é o lugar natural para totais de colunas, somas, médias ou outras linhas de resumo que agregam os dados do corpo. Agrupar essas linhas com <tfoot> em vez de um simples <tr> dá à tabela uma estrutura semântica clara, o que ajuda as tecnologias assistivas a descrever a tabela para usuários de leitores de tela.

Por que usar `<tfoot>` ?

Semântica e resumos. O rodapé indica "estas linhas resumem a tabela" — totais, subtotais, contagens ou notas. Frequentemente, um único <th> ou <td> ocupa toda a largura com colspan.
Comportamento de impressão e rolagem. Quando uma tabela longa é impressa em várias páginas, alguns agentes de usuário repetem <thead> e <tfoot> em cada página. Se você permitir que o corpo role de forma independente (com CSS overflow), o rodapé pode permanecer fixo na parte inferior.
Acessibilidade. Grupos explícitos de cabeçalho, corpo e rodapé fornecem aos leitores de tela uma estrutura mais significativa do que uma lista plana de linhas.

Onde vai o `<tfoot>` ?

A tag <tfoot> deve ser declarada dentro do elemento <table>, após os elementos <caption> e <colgroup> (se existirem).

No HTML5, <tfoot> pode aparecer antes ou depois de <tbody> no código-fonte. A regra antiga do HTML4 que exigia que <tfoot> viesse antes de <tbody> está obsoleta. De qualquer forma, os navegadores sempre renderizam o rodapé na parte inferior da tabela, por isso colocá-lo por último (logo após o corpo) é a opção mais legível.

Perigo

A tag <tfoot> deve conter pelo menos uma tag <tr>.

Dica

Os elementos <thead> , <tbody> e <tfoot> não afetam o layout da tabela por padrão. Use propriedades CSS para personalizar a aparência da tabela.

Sintaxe

A tag <tfoot> vem em pares. O conteúdo é escrito entre as tags de abertura ( <tfoot> ) e de fechamento ( </tfoot> ).

Tag HTML <tfoot>

<table>
  <thead> ... </thead>
  <tbody> ... </tbody>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
</table>

Exemplo com uma linha de totais

Este exemplo usa <thead> , <tbody> e <tfoot> juntos. O rodapé contém uma linha de resumo que totaliza os valores do corpo:

<!DOCTYPE html>
<html>
  <head>
    <title>tfoot totals row</title>
    <style>
      table { width: 360px; border-collapse: collapse; }
      th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
      tfoot td { font-weight: bold; background-color: #f2f2f2; }
    </style>
  </head>
  <body>
    <table>
      <caption>Monthly Sales</caption>
      <thead>
        <tr>
          <th>Product</th>
          <th>Units</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Keyboards</td>
          <td>40</td>
        </tr>
        <tr>
          <td>Mice</td>
          <td>35</td>
        </tr>
        <tr>
          <td>Monitors</td>
          <td>25</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>100</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Result

Observe que <tfoot> é escrito após <tbody> no código-fonte, mas o rodapé ainda é renderizado na parte inferior — exatamente onde você o lê.

Estruturação de tabelas complexas

Use os elementos <thead> , <tbody> e <tfoot> para organizar tabelas que contêm conjuntos de dados grandes ou complexos. Eles tornam o código-fonte mais fácil de ler, permitem estilizar cada seção de forma independente e melhoram a acessibilidade. Para habilitar a rolagem independente do corpo mantendo o cabeçalho e o rodapé visíveis, aplique propriedades CSS overflow ao <tbody> .

Atributos

Atributo	Valor	Descrição
align	right, left, center, justify, char	Define o alinhamento horizontal do conteúdo dentro do elemento `<tfoot>` . Este atributo não é suportado pelo HTML5.
bgcolor	bgcolor	Define a cor de fundo das linhas dentro do elemento `<tfoot>` . Este atributo não é suportado pelo HTML5.
char	character	Especifica o alinhamento do conteúdo dentro do elemento `<tfoot>` a um caractere. Usado apenas quando o atributo align="char". Este atributo não é suportado pelo HTML5.
charoff	number	Especifica o número de caracteres que o conteúdo dentro do elemento `<tfoot>` será alinhado a partir do caractere especificado pelo atributo char. Usado apenas quando o atributo align="char". Este atributo não é suportado pelo HTML5.
valign	top, bottom, middle, baseline	Especifica o alinhamento vertical do conteúdo dentro do elemento `<tfoot>` . Este atributo não é suportado pelo HTML5.

Nota: Todos os atributos listados acima estão obsoletos no HTML5. Use CSS em vez deles. A tabela abaixo mostra a substituição moderna para cada um:

Atributo obsoleto	Substituição CSS
`align`	`text-align`
`valign`	`vertical-align`
`bgcolor`	`background-color`

A tag <tfoot> também suporta os Atributos Globais e os Atributos de Evento.

Como estilizar uma tag HTML <tfoot>

tfoot {
  background-color: #f2f2f2; /* replaces bgcolor */
  font-weight: bold;
  text-align: right;         /* replaces align */
  vertical-align: middle;    /* replaces valign */
}

Consulte o capítulo Tabelas CSS para mais formas de estilizar seções de tabela.

Prática

Qual é a finalidade da tag HTML tfoot e onde ela pode aparecer em uma tabela?

Ela agrupa o conteúdo do rodapé (como totais ou linhas de resumo) e, no HTML5, pode aparecer antes ou depois da tag tbody, sendo sempre renderizada na parte inferiorEla agrupa o conteúdo do cabeçalho da tabelaEla agrupa as linhas de dados principais da tabelaEla agrupa o conteúdo do rodapé, mas deve ser colocada antes da tag theadEla agrupa o conteúdo do rodapé e, no HTML5, deve vir antes de tbody ou a página é inválida

Por que usar <tfoot> ?

Onde vai o <tfoot> ?