- Página Inicial
- Códigos HTML Prontos
- Html tfoot
- Voltar
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: Loop Nerd
450 Visualizações
Deixe um comentário