Crie Rodapés de Tabela Eficazes em HTML

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.html e 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.

Rodapé de Tabela HTML

Introdução

Criar uma Estrutura de Tabela Básica

Adicionar Conteúdo ao Rodapé da Tabela

Aplicar CSS ao Rodapé da Tabela

Resumo