Html tfoot

Postado: 20 de junho de 2022

Html tfoot

Neste artigo HTML veremos como usar o elemento HTML chamado de tag <tfoot>

A tag <tfoot> em HTML é usada para fornecer o conteúdo do grupo de rodapé. Esta tag é usada na tabela HTML com cabeçalho e corpo que é conhecido como “thead” e “tbody”. 

A tag <tfoot> é a tag filha da tabela e a tag pai de <tr> e <td>.

O elemento  <tfoot> é usado em conjunto com os elementos <thead> e <tbody> para especificar cada parte de uma tabela como: rodapé, cabeçalho, corpo).

Veja o exemplo no código abaixo.

Você também pode adicionar o Css para estilizar as cores e alinhar os textos.

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

thead {color:blue; text-align:center;}
tbody{color:black; text-align:center;}
tfoot {color:red; text-align:center;}

</style>
<table>

  <thead>
    <tr>
      <th>Front-end</th>
      <th>Back-end</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Html5</td>
      <td>PHP</td>
    </tr>
    <tr>
      <td>CSS3</td>
      <td>MySql</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>JavaScript</td>
      <td>Python</td>
    </tr>
  </tfoot>

</table>

Veja como centralizar Conteúdo no <tfoot>.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>Center-align content in tfoot</h1>

<table style="width:100%">
  <tr>
    <th>Mês</th>
    <th>Salário</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>R$ 1.500</td>
  </tr>
  <tr>
    <td>Fevereiro</td>
    <td>R$ 1.300</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Total</td>
      <td>R$ 2.800</td>
    </tr>
  </tfoot>  
</table>

</body>
</html>

Configurações padrão de CSS

A maioria dos navegadores exibirá o elemento  <tfoot> com os seguintes valores padrão:

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

Neste artigo abordamos sobre a tag Html tfoot.

Veja outros artigos Relacionados a Tags de Tabelas no HTML.

1. Html dt

2. Html tr

3. Html th

4. Html tbody

5. Html thead

Publicado por: loopnerd

106 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados