Html tfoot
Html thead
Html option
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
Deixe um comentário