ir para o conteúdo | ir para o menu | sobre os links "ir para"

InfoWester

www.infowester.com

Pesquisa InfoWester: clique aqui para responder e ajude o site a melhorar!

Notícias Recentes

Últimas do Blog

Tamanho
do texto

Aumentar o tamanho do texto Diminuir o tamanho do texto

Web

Tags HTML quase desconhecidas, mas muito úteis para as suas tabelas

PPor Erika Sarti, em 28/05/2009. Atualizado em 28/10/2009

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 deste artigo. Vamos lá?

Tags <thead>, <tbody> e <ftoot>

Quando pensamos na estrutura HTML de uma tabela, geralmente utilizamos um código semelhante a este:


	<table width="300">
	 <tr>
	  <td>Janeiro</td>
	  <td>R$ 1467</td>
	 </tr>
	 <tr>
	  <td>Fevereiro</td>
	  <td>R$ 956</td>
	 </tr>
	 <tr>
	  <td>Março</td>
	  <td>R$ 1593</td>
	 </tr>
	</tr>
	</table>

Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593

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:


	<table width="300">
	<thead>
	  <th>Mês</th>
	  <th>Vendas</th>
	</thead>
	<tbody>
	 <tr>
	  <td>Janeiro</td>
	  <td>R$ 1467</td>
	 </tr>
	 <tr>
	  <td>Fevereiro</td>
	  <td>R$ 956</td>
	 </tr>
	 <tr>
	  <td>Março</td>
	  <td>R$ 1593</td>
	 </tr>
	</tr>
	</tbody>
	<tfoot>
	  <th>Total</th>
	  <th>R$ 4016</th>
	</tfoot>
	</table>

Mês	Vendas
Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593
Total	R$ 4016

Note que junto com as tags <thead> e <tfoot> usamos <th> para criar uma célula, ao invés 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:


thead	{
	font-style: italic;
	}


tfooter {
	font-style: italic;
	}

Mês	Vendas
Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593
Total	R$ 4016

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:


thead	{
	text-align: left;
	color: #900;
	}

tbody	{
	color: #666;
	}


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

Mês	Vendas
Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593
Total	R$ 4016

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.

.: Livros sugeridos :.

:: Use a cabeça: HTML com CSS e XHTML

:: Não me faça pensar - Uma abordagem de bom senso à usabilidade na Web

Via Shopping UOL

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. Até a próxima!

Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.