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:

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

22 thoughts on “Semântica de tabelas”

  1. Henrique, curti pra caramba estas explicações, apesar de não mexer muito no código html das páginas um dia pode me ser bastante útil.
    Parabéns. 🙂

  2. Cara, bacana este artigo. Mas, acho que deveria apresentar os demais recursos para uma table. Como: summary; scope; header; dentre outros.

    Um abraço.

  3. Pingback: Tableless » Blog Archive » Uso correto das tabelas
  4. Pingback: Carlos Soler » Estilos para tabelas
  5. Pingback: O’Marin World » Blog Archive » Atlas o ajax do .Net
  6. Parabéns pelo artigo. Foi muito útil para mim que já estou caminhando para prestação de serviços totalmente acessíveis, mas ainda não havia tido oportunidade de estudar tabelas (somente a ausência delas ;D)

    Concordo com Leandro. Pena não ter tido também as tags: summary; scope; header; dentre outros.

  7. Qual a possibilidade de usar lista de definições e tabelas? O apelido e o nome de uma pessoa poderiam ser itens da lista de definição, mas estariam em uma tabela com a descrição de outros dados (RG, CPF, etc).

Leave a Reply

Your email address will not be published. Required fields are marked *