Tags THEAD – TFOOD e TBODY em HTML

Ao criar tabelas em HTML, as tags <thead>, <tfoot>, e <tbody> são essenciais para organizar melhor a estrutura da tabela, tornando-a mais acessível e fácil de gerenciar. Elas ajudam a separar visualmente o cabeçalho, o rodapé e o corpo dos dados. Neste post, aprenda sobre as tags THEAD – TFOOD e TBODY em HTML.

Estrutura básica de uma tabela

Em uma tabela HTML, usamos <table> como contêiner principal, e as tags <thead>, <tfoot>, e <tbody> servem para dividir o conteúdo em seções distintas:

<table>
    <thead>
        <!-- Cabeçalho da Tabela -->
    </thead>
    <tbody>
        <!-- Corpo da Tabela -->
    </tbody>
    <tfoot>
        <!-- Rodapé da Tabela -->
    </tfoot>
</table>

A divisão da tabela em seções ajuda na organização visual e permite ao navegador otimizar o carregamento da tabela. Vamos agora explorar cada uma dessas tags em detalhes.

1. Tag <thead>: Cabeçalho da tabela

A tag <thead> é usada para agrupar o cabeçalho de uma tabela. Ela geralmente contém os títulos das colunas, ajudando a identificar cada seção de dados. Dentro dela, utilizamos <tr> para definir as linhas e <th> para os títulos das colunas.

Exemplo:

<table>
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
            <th>Quantidade</th>
        </tr>
    </thead>
</table>

Nota: A tag <th> (table header) dentro de <thead> estiliza o texto como negrito e centralizado por padrão, destacando os títulos das colunas.

2. Tag <tbody>: Corpo da tabela

A tag <tbody> é usada para agrupar as linhas de dados principais da tabela. Ela contém as linhas (<tr>) e células (<td>) com os dados do conteúdo.

Exemplo:

<table>
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
            <th>Quantidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Caneta</td>
            <td>R$ 2,00</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Caderno</td>
            <td>R$ 10,00</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

3. Tag <tfood>: Rodapé da tabela

A tag <tfoot> é usada para definir o rodapé da tabela. Geralmente, ela é usada para informações como totais, subtotais, ou outras informações adicionais. Ela é especialmente útil para tabelas grandes, pois ajuda a manter o rodapé fixo quando a tabela é rolada.

Exemplo:

<table>
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
            <th>Quantidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Caneta</td>
            <td>R$ 2,00</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Caderno</td>
            <td>R$ 10,00</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>R$ 12,00</td>
            <td>80</td>
        </tr>
    </tfoot>
</table>

Benefícios do uso de <thead>, <tbody> e <tfood>

• Acessibilidade: Essas tags ajudam na leitura de dados por leitores de tela, facilitando a navegação de usuários com deficiência visual.
  
  
• Melhoria na estilização: Permite aplicar estilos CSS específicos para o cabeçalho, corpo e rodapé da tabela, facilitando a personalização.
  
  
• Organização de dados: Separar a tabela em seções facilita a leitura do código e o entendimento da estrutura de dados.
  
  
• Otimização de navegadores: Navegadores processam tabelas mais rápido quando organizadas com <thead>, <tbody>, e <tfoot>.

Aplicando CSS para melhorar a aparência da tabela

Para estilizar a tabela, você pode usar CSS para aplicar estilos específicos a cada seção:

thead {
    background-color: #333;
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

tfoot {
    font-weight: bold;
    background-color: #ddd;
}

Este CSS:

• Estiliza o cabeçalho com uma cor de fundo escura e texto branco.
  
  
• Alterna a cor de fundo das linhas pares no <tbody> para facilitar a leitura.
  
  
• Destaca o rodapé da tabela em negrito e com um fundo claro.

Outro exemplo prático

<table> 
 <thead> <!-- abrimos o cabeçalho -->
  <th>Dia</th> 
  <th>Valor</th> 
 </thead> <!-- fechamos o cabeçalho --> 
 <tbody> <!-- abrimos o corpo --> 
  <tr> <!-- abre a linha --> 
   <td>27 de Maio</td> <!-- define a coluna 01 -->
   <td>R$1.600,00</td> <!-- define a coluna 02 -->
  </tr> <!-- fecha a linha --> 
  <tr> 
   <td>25 de Março</td>
   <td>R$ 1.450,00</td>
  </tr> 
  <tr>
   <td>25 de Dezembro</td>
   <td>R$3.200,00</td>
  </tr>
 </tbody> <!-- fechamos o corpo --> 
 <tfoot> <!-- abrimos o rodapé -->  
  <th>Total</th> 
  <th>R$ 6.250,00</th>
 </tfoot> <!-- fechamos o rodapé -->  
</table>

Resultado:

Dia	Valor
27 de Maio	R$1.600,00
25 de Março	R$ 1.450,00
25 de Dezembro	R$3.200,00
Total	R$ 6.250,00

Junto com as tags <thead> e <tfoot> utilizamos a tag <th> para criar uma célula, em vez da tag <td>. A fonte nessas células serão automaticamente formatadas em negrito e centralizadas.

Lembrando que você pode usar folhas de estilo para alterar o aspecto visual das tags. Exemplo:

thead {
	text-align: right;
	color: #FF00FF;
}

tbody {
	color: #555;
}

tfooter {
	text-align: left;
	color: #999;
}

As tags <thead>, <tbody>, e <tfoot> são componentes valiosos para a criação de tabelas HTML bem organizadas, acessíveis e fáceis de estilizar.

Além de melhorar a estrutura e a clareza do código, elas também contribuem para uma melhor experiência do usuário final.

Dúvidas ou sugestões sobre as tags THEAD – TFOOD e TBODY em HTML? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: thead tfood tbody html