CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

HyperText Markup Language (HTML) - Tags THEAD, TFOOD e TBODY

Por Benedito Silva Júnior - publicado em 14/07/2016


O mais comum é utilizarmos as tags <TR>, <TD> para criarmos linhas e colunas, respectivamente, em nossas tabelas. Essas tags são as mais difundidas e, portanto, as mais conhecidas.

No entanto há outras tags que podem compor a codificação de tabelas, deixando-as muito mais semânticas, ou seja, mais fáceis de serem compreendidas por humanos. Isso torna a manutenção dos códigos mais fácil. Neste artigo abordarei as tags <THEAD>, <TBODY> e <TFOOT>.

Quando pensamos em tabelas no HTML logo vem em mente a estrutura:

<table> <!-- inicia tabela --> <tr> <!-- define a linha --> <td>País</td><td> UF</td><td> Cidade</td> <!-- define as células da linha --> </tr> <!-- encerra linha --> <tr> <!-- define uma nova linha --> <!-- define as células da linha --> <td> Brasil</td><td> São Paulo</td><td> Sumaré</td> </tr> <!-- encerra a nova linha --> </table> <!-- encerra a tabela -->

Utilizando as tags <THEAD>, <TBODY> e <TFOOT> conseguimos atribuir a nossa tabela um cabeçalho, definir um "corpo" e adicionar um rodapé, respectivamente:

<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; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo