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.
| 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:
| 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:
| 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:
| 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.
| 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.
Este site é apoiado por: