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 Responses to “Semântica de tabelas”

  1. Fabio Ortolan

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

  2. Carlos (Putcharles)

    Muito bom!

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

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

  4. Orestes

    eu não conhecia esse código.

    Parabéns pelo site, muito legal isso

  5. Wesley Menezes

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

  6. Ana Claudia Oliveira

    Parabéns pelo seu blog. Muito bom.

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

    []'s

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

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

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

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

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

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

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>