Tag tfoot

A tag tfoot define o rodapé de uma tabela. É usada para agrupar linhas de forma que se possa aplicar estilos CSS a um grupo de uma vez. Só pode haver uma tag tfoot em uma tabela.

A tag tfoot é frequentemente usada em conjunto com thead e tbody para definir o cabeçalho, o corpo principal e o rodapé de uma tabela HTML. Por padrão, o navegador colocará o conteúdo de tfoot na parte inferior da tabela, e o thead - na parte superior.

Exemplo

Vamos definir a cor do texto como vermelho para o grupo de linhas agrupadas pela tag tfoot, usando a propriedade color:

html<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Salário</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>nome1</td>
      <td>sobrenome1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>nome2</td>
      <td>sobrenome2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Exemplo

Aqui, vamos ver que o thead não está no topo e o tfoot não está na base, no entanto, o navegador os posiciona em seus devidos lugares:

html<table>
  <tfoot>
    <tr>
      <td>total: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>nome1</td>
      <td>sobrenome1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>nome2</td>
      <td>sobrenome2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Salário</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Veja também