Etiqueta <tfoot> de HTML

Definição e uso

<tfoot> A tag é usada para agrupar o conteúdo do rodapé da tabela HTML.

<tfoot> O elemento é usado com <thead> e <tbody> Os elementos combinados são usados para especificar cada parte da tabela (rodapé, cabeçalho, corpo).

Os navegadores podem usar esses elementos para que, ao rolar o corpo da tabela, o cabeçalho e o rodapé possam ser exibidos separadamente. Além disso, ao imprimir tabelas grandes que span várias páginas, esses elementos permitem que o cabeçalho e o rodapé sejam impressos no topo e na parte inferior de cada página.

Atenção: O elemento <tfoot> deve conter um ou mais <tr> tag.

<tfoot> A tag deve ser usada no seguinte contexto: como uma <table> Os elementos filhos, em qualquer <caption><colgroup><thead> e <tbody> depois do elemento.

Dica:Por padrão, <thead>, <tbody> e <tfoot> Os elementos não afetam o layout da tabela. Mas, você pode usar CSS para definir o estilo desses elementos (veja os exemplos a seguir)!

Exemplo

Exemplo 1

Tabela HTML que contém <thead>, <tbody> e <tfoot> elementos:

<table>
  <thead>
    <tr>
      <th> Mês </th>
      <th> Poupança </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Janeiro </td>
      <td>¥3400</td>
    </tr>
    <tr>
      <td> Fevereiro </td>
      <td>¥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Montante total</td>
      <td>¥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

Exemplo 2

Use CSS para definir o estilo de <thead>, <tbody> e <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th> Mês </th>
      <th> Poupança </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Janeiro </td>
      <td>¥3400</td>
    </tr>
    <tr>
      <td> Fevereiro </td>
      <td>¥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Montante total</td>
      <td>¥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

Exemplo 3

Como alinhar <tfoot> do conteúdo (usando CSS):

<table style="width:100%">
  <tr>
    <th> Mês </th>
    <th> Poupança </th>
  </tr>
  <tr>
    <td> Janeiro </td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td> Fevereiro </td>
    <td>¥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Montante total</td>
      <td>¥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

Exemplo 4

Como alinhar verticalmente <tfoot> do conteúdo (usando CSS):

<table style="width:100%">
  <tr>
    <th> Mês </th>
    <th> Poupança </th>
  </tr>
  <tr>
    <td> Janeiro </td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td> Fevereiro </td>
    <td>¥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Montante total</td>
      <td>¥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

Atributos globais

<tfoot> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<tfoot> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <tfoot> Elemento:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Suporte a navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte