Leonardo Caineli Web Designer e Programador de Interfaces

Tabelas semânticas

Postado em 02/07/2008 na(s) categoria(s) Padrões Web

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">
	<caption>Lista de produtos</caption>
	<thead>
		<tr>
			<th>Produtos</th>
			<th>Preços</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Total de produtos:</th>
			<td>5</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>Nome do produto 1</th>
			<td>R$ 999,99</td>
		</tr>
		[...]
	</tbody>
</table>

Caption:

A tag “caption” permite criar o cabeçalho de título para a tabela.

Thead:

A tag “thead” permite criar o cabeçalho da tabela.

Tfoot:

A tag “tfoot” permite criar o rodapé da tabela (que será exibido após a tag “tbody”).

Tbody:

A tag “tbody” permite criar o corpo da tabela.

Tr:

A tag “tr” permite criar uma linha.

Th:

A tag “th” permite criar um título de linha ou coluna.

Td:

A tag “td” permite criar uma coluna.

Atributos:

O atributo “summary” permite criar uma descrição para a tabela.

Resultado: