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:
<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>
tfoot {
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:
<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>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
