Introdução
Em HTML, você pode agrupar o conteúdo do rodapé de uma tabela usando a tag <tfoot>. O rodapé da tabela pode incluir informações de resumo, notas explicativas ou comentários. A tag <tfoot> é um dos filhos da tag <table> e é usada em conjunto com as tags <thead> e <tbody>. Neste laboratório, você aprenderá como criar rodapés de tabela em HTML usando a tag <tfoot>.
Nota: Você pode praticar a codificação em
index.htmle aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Criar uma Estrutura de Tabela Básica
Comece criando uma estrutura de tabela básica que contenha seções de cabeçalho da tabela, corpo da tabela e rodapé da tabela.
<!doctype html>
<html>
<head>
<title>Rodapé da Tabela usando a tag tfoot</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Gênero</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Masculino</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Feminino</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Masculino</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Rodapé da Tabela</td>
</tr>
</tfoot>
</table>
</body>
</html>
No código acima, criamos uma estrutura de tabela básica com três colunas: Nome, Idade e Gênero. Também adicionamos três linhas de dados à tabela. A tag <tfoot> contém apenas uma linha com uma célula (<td>) que se estende por três colunas (colspan="3").
Adicionar Conteúdo ao Rodapé da Tabela
Depois de criar a estrutura básica da tabela, você pode adicionar conteúdo à tag <tfoot>.
<!doctype html>
<html>
<head>
<title>Rodapé da Tabela usando a tag tfoot</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Gênero</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Masculino</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Feminino</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Masculino</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Idade Média:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
Neste exemplo, adicionamos uma linha à tag <tfoot> que contém a idade média das pessoas na tabela. A primeira célula na linha se estende por duas colunas (colspan="2") e exibe o texto "Idade Média:". A segunda célula exibe o valor real da idade média.
Aplicar CSS ao Rodapé da Tabela
Você pode aplicar estilos CSS à tag <tfoot> e seus elementos filhos para ajustar a aparência do rodapé da tabela.
<!doctype html>
<html>
<head>
<title>Rodapé da Tabela usando a tag tfoot</title>
<style>
tfoot {
background-color: #ccc;
font-weight: bold;
text-align: center;
}
tfoot td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Gênero</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Masculino</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Feminino</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Masculino</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Idade Média:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
Neste exemplo, aplicamos estilos de cor de fundo, espessura da fonte e alinhamento de texto à tag <tfoot> usando o seletor CSS tfoot. Também aplicamos preenchimento (padding) às células dentro da seção do rodapé da tabela usando o seletor tfoot td.
Resumo
A tag <tfoot> é usada para agrupar o conteúdo do rodapé de uma tabela. Ela funciona em conjunto com as tags <thead> e <tbody> para criar uma estrutura de tabela completa. Você pode adicionar conteúdo e estilos à tag <tfoot> e seus elementos filhos usando HTML e CSS.
