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.

  • Thiago Melo
  • Fabio Ortolan

    Sempre se esquecem da propriedade summary na tag table para a ascessibilidade…

  • Anônimo

    Gostei! Bem pensado. ^^

  • Diogo Chaves
  • Carlos (Putcharles)

    Muito bom!

    Também já conhecia e achei ótima a iniciativa!

  • http://japs.etc.br Flávio Theruo

    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. :-)

  • Orestes

    eu não conhecia esse código.

    Parabéns pelo site, muito legal isso

  • Pingback: Semântica de Títulos » Revolução

  • Wesley Menezes

    Muito interessante… eu sabia que existia essas tags, mas sempre pensei que fosse obrigatório o uso na ordem , e dps

  • Ana Claudia Oliveira

    Parabéns pelo seu blog. Muito bom.

    Sugiro q vc abra espaço para colaborações de artigos.

    []'s

  • http://www.tudoin.com.br Luiz Júnior F

    Putz, curti ao extremo este tópico, msm pq tem horas que nao temos como nos ver 100% livres das ; curti muito tb seu blog, tah de parabens truta ;)

  • Leandro Vieira Pinho

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

    Um abraço.

  • Pingback: Microformats » Revolução

  • Pingback: Tableless » Blog Archive » Uso correto das tabelas

  • Pingback: Carlos Soler » Estilos para tabelas

  • Pingback: O’Marin World » Blog Archive » Atlas o ajax do .Net

  • Emerson

    Tirou minha duvida

    vlw

  • William Lopes

    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.

  • http://www.noradar.com Noradar

    Muito bom o artigo, me foi muito útil. Parabéns pelo trabalho!

  • http://meadiciona.com/lezgal Almino Melo

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

  • http://flaviowd.wordpress.com Flávio Araújo

    Henrique,

    O link para o seu css que foi aplicado a tabela de exemplo do post esta quebrado :(

    Excelente o post, sempre me recorro a ele ;)