Tabelas semânticas

Você já deve saber que o desenvolvimento utilizando Padrões Web preza pela Semântica no código. Todo código que você escrever deve dar algum significado ao conteúdo. E toda tag sem sua função específica e te ajuda a formar um código mais esperto e legível.

Alguns elementos por dependerem de várias tags para ter um funcionamento pleno, acabam sofrendo com o desinteresse dos desenvolvedores em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das TABLES.

por Diego Eis 27/10/2008

Você já deve saber que o desenvolvimento utilizando Padrões Web preza pela Semântica no código. Todo código que você escrever deve dar algum significado ao conteúdo. E toda tag sem sua função específica e te ajuda a formar um código mais esperto e legível.

Alguns elementos por dependerem de várias tags para ter um funcionamento pleno, acabam sofrendo com o desinteresse dos desenvolvedores em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das TABLES.

Normalmente, escrevemos uma tabela mais ou menos assim:

Produto Descrição Valor
Tênis Tênis com amortecedor, tecido vermelho com cadarço preto. R$350,00
Camiseta Tamanho GG, cor preta e uma estampa nas costas. R$55,00
Calça Tecido Jeans, azul claro, com botão duplo. R$105,00

Para nós que enxergamos bem e conseguimos fazer uma breve interpretação de texto, conseguimos entender na maioria das vezes qual o assunto das tabelas na página.

Mas e o Google? E o leitor de tela do cego?

Por isso, a tabela tem algumas tags que ajudam o desenvolvedor a dar mais informação sobre o conteúdo daquela tabela.

Há algumas tags que iremos acrescentar em nossa tabela para dar essa informação extra ao visitante, seja ele ser humano ou robô.

SUMMARY – Dizendo do que se trata a tabela

O atributo summary é colocado na tag TABLE. Ela serve para indicar do que se trata aquela tabela, dizendo sua utilidade e que tipo de informação está descrevendo.

TH – Table Header

Considerando o código que colocamos mais acima, há os títulos de células PRODUTO, DESCRIÇÃO e VALOR. Esses títulos, devem ser destacados como título, não apenas modificando seu visual pelo CSS, mas também destacando-os pelo código. Para fazermos isso, iremos utizar a tag TH.

Essa tag irá indicar que tais células são títulos. O nosso código ficará assim:

<th>
  Descrição
</th>


<th>
  Valor
</th>

<td>
  Tênis com amortecedor, tecido vermelho com cadarço preto.
</td>


<td>
  R$350,00
</td>

<td>
  Tamanho GG, cor preta e uma estampa nas costas.
</td>


<td>
  R$55,00
</td>

<td>
  Tecido Jeans, azul claro, com botão duplo.
</td>


<td>
  R$105,00
</td>

Produto
Tênis
Camiseta
Calça

THEAD – Cabeçalho da Tabela

Normalmente as tabelas tem sempre uma linha de títulos, como a nossa tabela acima. Precisamos informar então, que essa linha é um cabeçalho, que contém os títilos das colunas ou linhas. Para isso, envolveremos a TR que contém as THs com a tag THEAD. Nosso código ficará dessa forma:

<th>
  Descrição
</th>


<th>
  Valor
</th>

<td>
  Tênis com amortecedor, tecido vermelho com cadarço preto.
</td>


<td>
  R$350,00
</td>

<td>
  Tamanho GG, cor preta e uma estampa nas costas.
</td>


<td>
  R$55,00
</td>

<td>
  Tecido Jeans, azul claro, com botão duplo.
</td>


<td>
  R$105,00
</td>

Produto
Tênis
Camiseta
Calça

TFOOT – Indicando o rodapé da tabela

Logo após o THEAD, iremos indicar quais informações irão no rodapé do documento, utilizando a tag TFOOT. Aqui, iremos colocar as mesmas informações do THEAD, supondo que a tabela é muito grande e queremos que o usuário, ao chegar no rodape, não se perca com a identificação das colunas. Nosso código fica assim:

<th>
  Descrição
</th>


<th>
  Valor
</th>

<th>
  Descrição
</th>


<th>
  Valor
</th>

<td>
  Tênis com amortecedor, tecido vermelho com cadarço preto.
</td>


<td>
  R$350,00
</td>

<td>
  Tamanho GG, cor preta e uma estampa nas costas.
</td>


<td>
  R$55,00
</td>

<td>
  Tecido Jeans, azul claro, com botão duplo.
</td>


<td>
  R$105,00
</td>

Produto
Produto
Tênis
Camiseta
Calça

TBODY – Indicando o corpo da tabela

Se há um cabeçalho e um rodapé na tabela, é mais do que normal haver um BODY, apresentando as informações que de fato interessam ao usuário.
O TBODY deve ir logo após a tag TFOOT. Sinceramente, não sei porque a tag TFOOT não vem após a TBODY, já que é o código de Rodapé. Se você souber, por favor, me diga!

Nosso código fica dessa forma:

<th>
  Descrição
</th>


<th>
  Valor
</th>

<th>
  Descrição
</th>


<th>
  Valor
</th>

<td>
  Tênis com amortecedor, tecido vermelho com cadarço preto.
</td>


<td>
  R$350,00
</td>

<td>
  Tamanho GG, cor preta e uma estampa nas costas.
</td>


<td>
  R$55,00
</td>

<td>
  Tecido Jeans, azul claro, com botão duplo.
</td>


<td>
  R$105,00
</td>

Produto
Produto
Tênis
Camiseta
Calça

CAPTION – Título do Cabeçalho

A tag CAPTION define um título para o cabeçalho da tabela. Esse título vai apresentar a tabela para o usuário. Ele deve ser colocado logo antes da tag THEAD e logo após tag TABLE.

<caption>Produtos em Promoção</caption>

<th>
  Descrição
</th>


<th>
  Valor
</th>

<th>
  Descrição
</th>


<th>
  Valor
</th>

<td>
  Tênis com amortecedor, tecido vermelho com cadarço preto.
</td>


<td>
  R$350,00
</td>

<td>
  Tamanho GG, cor preta e uma estampa nas costas.
</td>


<td>
  R$55,00
</td>

<td>
  Tecido Jeans, azul claro, com botão duplo.
</td>


<td>
  R$105,00
</td>

Produto
Produto
Tênis
Camiseta
Calça

Já com essas tags diferenciadas, o trabalho que teríamos para formatar o cabeçalho, título e conteúdo da tabela ficou mais leve. Em vez de colocar class em tudo quanto é TR para diferenciar as partes da tabela, conseguimos formatar cada um desses grupos sem encostar no código HTML. Claro, que se você quiser fazer algo mais rebuscado, a modificação do código HTML será inevitável. Mas, com esse pouco código que escrevemos, já procrastinamos essa necessidade.