Etiqueta <tfoot> de HTML
- Página anterior <textarea>
- Próxima página <th>
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>
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>
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>
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>
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 |
- Página anterior <textarea>
- Próxima página <th>