Semântica de tabelas

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:

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.