Semântica de tabelas
Por:
Saturday 03 September 2005 Ã s 16:55Categoria: HTML / CSS / JavaScript
As tabelas foram e ainda são utilizadas para estruturar sites, obviamente de forma errada. Mas muitas pessoas pensam que desenvolver um site em webstandards significa nunca usar uma tabela no site. Isso não é verdade. Para estruturar um site, o correto é utilizar as tags corretamente respeitando o propósito pelo qual elas foram criadas, assim como a tag <table> que foi criada para exibir dados tabulares. Já me perguntaram o que são dados tabulares e minha resposta foi: "São dados em formato de tabela!". No propósito que estou discutindo aqui, são dados exibidos e organizados em linhas e colunas. Tudo que tem este formato é uma tabela.
A maioria das pessoas conhece o código de uma tabela em um documento XHTML da seguinte forma:
<table>
<tr>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
</tr>
<tr>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
</tr>
<tr>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
</tr>
<tr>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
<td>texto aqui!</td>
</tr>
</table>
Existem outras tags que podem ampliar muito o potencial de se controlar os estilos de uma tabela. Fora as tags <table> <tr> e <td> conhecida de praticamente todos, ainda existem outras como as declaradas a seguir:
- <caption> :
- Caption em inglês é cabeçalho. Usando esta tag você insere um cabeçalho de título da tabela.
- <th> :
- TH é um acrônimo de Table Header ou cabeçalho de tabela. Pode ser usado em substituição da TD. A melhor aplicação desta tag é em títulos de linhas ou colunas como pode ser exemplificado em um exemplo mais abaixo.
- <thead> <tbody> <tfoot> :
- Estas tags são usadas para agrupar linhas de uma tabela e defini-las. Por exemplo, <thead> define a primeira linha da tabela e <tfoot> define a última linha, <tbody> é o corpo da tabela propriamente dito. Veja abaixo como seria o código fonte de uma tabela utilizando todas estas tags.
<table>
<caption>texto</caption>
<thead>
<tr>
<th> texto </th>
<th> texto </th>
<th> texto </th>
<th> texto </th>
</tr>
</thead>
<tfoot>
<tr>
<th> texto </th>
<th> texto </th>
<th> texto </th>
<th> texto </th>
</tr>
</tfoot>
<tbody>
<tr >
<th> texto </th>
<td> texto </td>
<td> texto </td>
<td> texto </td>
</tr>
<tr>
<th> texto </th>
<td> texto </td>
<td> texto </td>
<td> texto </td>
</tr>
<tr >
<th> texto </th>
<td> texto </td>
<td> texto </td>
<td> texto </td>
</tr>
</tbody>
</table>
Observe que, mesmo que o <tfoot> esteja logo abaixo da tag <thead>, ela só é exibida abaixo do <tbody>. Veja abaixo a aparência dessa tabela:
| <thead> <th> | <thead> <th> | <thead> <th> | <thead> <th> |
|---|---|---|---|
| <tfoot><th> | <tfoot><th> | <tfoot><th> | <tfoot><th> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
| <tbody><th> | <tbody><td> | <tbody><td> | <tbody><td> |
Existe um site chamado CSS Table Gallery onde você pode exercer seus conhecimentos de CSS e colocar estilos em uma tabela. Eles publicaram minha versão e você pode conferir o CSS que eu usei aqui.
Artigos relacionados:
- Semântica de Títulos
- Semântica de Formulários
- Não bata palmas para meias-verdades!
- Validação e Semântica
- A semântica do span e do div
- Introdução a Semântica Web
- Meaningful Markup: XHTML com significado
Este texto não pode ser copiado ou reproduzido em nenhum outro site na Ãntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!
O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. 
# 1° Thiago Melo Monday 05 September 2005 Ã s 11:18GMT
Muito interessante este código, Henrique! Não sabia que existiam estas tags, semânticamente corretas para tabelas. Parabéns pelo blog; ele tem me ensinado muito! ;)