Artigos

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 …

Por Diego Eis

• 29 comentários
• Tweet

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:


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

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:

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

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:

Produto
Descrição
Valor




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

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:

Produto
Descrição
Valor




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

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.

Produtos em Promoção


Produto
Descrição
Valor




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

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.

• 29 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis