Leonardo Caineli Web Designer e Programador de Interfaces

Tabelas semânticas

A utilização da tabela é um assunto polêmico entre os Programadores de Interfaces. Alguns ainda às usam na estruturação de sites, outros levaram o termo “Tableless” ao pé da letra e resolveram abolir seu uso da face da terra. Devemos lembrar que cada tag deve ser utilizada respeitando o propósito pelo qual foi criada, no caso da tabela, deve ser utilizada para tratar dados tabulares, ou seja, dados exibidos em linhas e colunas.

Estruturando semanticamente uma tabela:

<table summary="lista de produtos"> <!-- summary: descrição da tabela -->
	<caption>Lista de produtos</caption> <!-- caption: cabeçalho de título -->
	<thead> <!-- thead: cabeçalho da tabela -->
		<tr> <!-- tr: linha -->
			<th>Produtos</th> <!-- th: título da linha ou coluna -->
			<th>Preços</th> <!-- th: título da linha ou coluna -->
		</tr>
	</thead>
	<tfoot> <!-- tfoot: rodapé da tabela (será exibido após o tbody) -->
		<tr> <!-- tr: linha -->
			<th>Total de produtos:</th> <!-- th: título da linha ou coluna -->
			<td>5</td> <!-- td: coluna -->
		</tr>
	</tfoot>
	<tbody> <!-- tbody: corpo da tabela -->
		<tr> <!-- tr: linha -->
			<th>Produto 1</th> <!-- th: título da linha ou coluna -->
			<td>R$ 99,99</td> <!-- td: coluna -->
		</tr>
		[...]
	</tbody>
</table>

Resultado: