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:


		<table loading="lazy" 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 loading="lazy" 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, 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:


	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.


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