Tags HTML quase desconhecidas, mas muito úteis para as suas tabelas
Por Erika Sarti, em 28_05_2009. Atualizado em 01_08_2011.
Introdução
Neste segundo artigo sobre "tags desconhecidas" (o
primeiro texto pode ser acessado neste link), vamos falar sobre três
tags que vão tornar suas tabelas mais semânticas: <thead>
,
<tbody>
e <tfoot>
. Antes de prosseguirmos,
uma observação importante: espera-se que o leitor tenha conhecimentos
básicos de HTML e CSS (Cascading Style Sheets) para melhor compreensão
do artigo. Vamos lá?
Tags <thead>, <tbody> e <ftoot>
Quando pensamos na estrutura HTML de uma tabela, geralmente utilizamos um código semelhante a este:
|
|
Utilizando as tags <thead>
, <tbody>
e <tfoot>
, podemos dar à nossa tabela, respectivamente,
um cabeçalho, definir o "corpo" dos dados e adicionar
um rodapé. Observe o exemplo abaixo para entender:
|
|
Note que junto com as tags <thead>
e <tfoot>
usamos
<th>
para criar uma célula, em vez de <td>
.
O texto dessas células será automaticamente centralizado e formatado com negrito.
Com algumas linhas de CSS, podemos estilizar o cabeçalho e o rodapé da nossa tabela, colocando-o em itálico:
|
|
Você pode estar pensando "ok, mas isso eu posso fazer apenas colocando o texto das células do cabeçalho e do rodapé em itálico". Pode, mas como eu disse no começo do artigo, o objetivo dessas três tags é deixar a tabela mais semântica.
Vamos imaginar que a tabela do exemplo está no site de uma empresa que publica dados contábeis. O site tem algumas dezenas de tabelas semelhantes. Hoje todas as tabelas têm o cabeçalho e o rodapé em itálico, mas o layout do site vai ser alterado e todas as tabelas passarão a ter o cabeçalho em vermelho, o rodapé em azul - ambos alinhados à esquerda - e o corpo da tabela em cinza.
Se você deixou o cabeçalho e o rodapé de todas as
tabelas em itálico utilizando a tag <i>
ou a tag <em>
,
vai ter um bom trabalho alterando a aparência e alinhamento de cada tabela. Mesmo
utilizando um editor visual, lá se vão algumas horas cuidando
disso.
Mas se o seu código for semântico (ou seja, no arquivo HTML ficam os dados em tags corretas, e no arquivo CSS fica o estilo da página), basta alterar algumas linhas da sua folha de estilo para alterar todas as tabelas do site. Veja o exemplo:
|
|
As três tags podem receber os atributos align
,
valign
, id
, class
, title
,
style
, dir
e lang
. Os eventos
permitidos são onclick
, ondblclick
, onmousedown
,
onmouseup
, onmouseover
, onmousemove
,
onmouseout
, onkeypress
, onkeydown
e onkeyup
.
Finalizando
É importante lembrar que tabelas devem ser usadas para organizar
dados, e não para estruturar o layout da sua página
HTML. Eventualmente, você pode até utilizar tabelas para
alinhar pequenos trechos da sua página, mas quando se trata do
layout da página inteira, esse tipo de código é semanticamente
incorreto, além de prejudicar o carregamento da página (já
que os dados de uma tabela só são exibidos pelo navegador
quando ele lê a tag </table>
). Caso te interesse,
o conceito de layout tableless já foi abordado anteriormente
aqui no Infowester, no artigo Menu
com abas num layout tableless.
Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do Infowester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.