Últimamente as tabelas são consideradas as vilãs da Web. Termos que ajudaram a disseminação dos Web Standards como o Tableless (sem tabelas) depreciavam esse elemento HTML. Não gosto muito do termo Tableless, prefiro usar Layout CSS pois Tableless significa “sem tabelas” e pode ser muito mal interpretado por parte de algumas pessoas, principalmente iniciantes.
As tabelas foram criadas para dados tabulares, mas por serem um meio muito amigável de aninhar a estrutura de uma página, foram e ainda são muito usadas para layout. Há alguns anos não uso mais tabelas para layout, nos cursos de Dreamweaver no qual eu ministro aulas explico aos meus alunos que eles não devem usar os recursos de criação de layouts em tabelas. Felizmente a Adobe está fazendo o sua parte também, na versão CS3 do dreamweaver esses recursos ainda existem mas perderam destaque.
Minha intenção aqui é mostrar alguns recursos para tabelas de dados tabulares. Existem recursos poucos explorados nas tabelas. Esses recursos melhoram a acessibilidade e também melhoram a semântica do conteúdo.
Inicialmente falarei sobre as principais tags HTML das tabelas. Em outros artigos estarei falando especificamente de apresentação e acessibilidade.
TAGS HTML
As principais tags de tabelas são:
- table – (tabela) Determina um elemento de dados tabulares
- tr – (table row) Insere linhas em uma tabela.
- td – (table data) Insere células e colunas na tabela
Uma estrutura básica de uma tabela seria:
<table> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table>
Com isso temos duas linhas com a tag <tr> e dentro dessas linhas temos duas células com a tag <td>. Essas duas células formarão colunas.
Para visualizarmos a estrutura da tabela iremos inserir o atributo border com o valor 1. Esse atributo e de apresentação e não deve ser usado. Como estamos somente conhecendo as tags HTML vamos usá-lo, mais a frente iremos retirá-lo.
Então a primeira linha do código ficaria assim:
<table border="1">
E a nossa tabela seria exibida assim:
| DADOS 1 | DADOS 2 |
| DADOS 3 | DADOS 4 |
Dica: É recomendado que todas as tags de dados <td> tenham conteúdo. Em último caso use o caractere especial de espaço ( ) se elas precisarem ficar vazias.
TAG CAPTION
A tag <caption> como o próprio nome já sugere é para inserir o título na tabela.
Vamos ao código:
<table border="1"> <caption>Nome da tabela</caption> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table>
Resultado:
| DADOS 1 | DADOS 2 |
| DADOS 3 | DADOS 4 |
Por padrão, o caption fica no topo da tabela mas você pode mudar a sua posição inserindo o atributo align com os valores: left, rigth, bottom e top. Você pode estar perguntando se isso não é apresentação. Também classifico como apresentação, mas infelizmente o CSS possui uma propriedade caption-side que nos meus testes só funcionou no nosso amigo Firefox. Como atributo align para o caption é valido no XHTML 1.1 não teremos problemas.
TAG TH
A tag <th> é usada para inserir uma legenda para colunas e linhas da tabela. Apesar da tag <th> ser inserida como uma célula e já ficar posicionada corretamente, devemos usar o atributo scope para reforçarmos a declaração de sua posição. O atributo scope recebe os valores col para cabeçalhos de coluna e row para cabeçalhos de linha.
<table border="1"> <caption>Nome da tabela</caption> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table>
Resultado:
| COLUNA 1 | COLUNA 2 |
|---|---|
| DADOS 1 | DADOS 2 |
| DADOS 3 | DADOS 4 |
O conteúdo as tags <th> por padrão são exibidos em negrito e centralizados.
TAGS THEAD TBODY e TFOOT
As tags <thead>, <tbody> e <tfoot>servem para otimizar a estrutura de uma tabela. Elas definem onde será exibido um determinado bloco de elementos e seu respectivo conteúdo:
- <thead> – topo da tabela
- <tfoot> – rodapé da tabela. Deve ser inserido antes da tag <tbody>
- <tbody> – todo o conteúdo da tabela
<table border="1"> <caption>Nome da tabela</caption> <thead> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> </thead> <tfoot> <tr> <th scope="col">RODAPÉ 1</th> <th scope="col">RODAPÉ 2</th> </tr> </tfoot> <tbody> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </tbody> </table>
OBS: Estarei usando os carateres especias acentuados sem codificá-los para melhorar a leitura do codigo no tutorial. É aconselhado o uso dos códigos HTML para caracteres especiais.
As tags <thead>, <tbody> e <tfoot> são ignoradas no Netscape 4.
Na impressão o conteúdo das tags <thead> e <tfoot> deveriam ser repetidos em todas as páginas que contenham dados de uma tabela. Infelizmente, testei esse recurso no IE6, IE7, Firefox 1.5, Ópera e Amaya da W3 e esse recurso só funcionou no Firefox. Você pode criar uma página de teste inserindo várias linhas dentro da tag <tbody> e usar o recurso de “Visulizar a Impressão” dos Browsers.
Mas não deixe de usar as tags de estrutura pois os dispositivos de acessibilidade a cada dia melhoram o seu suporte à essas estruturas semânticas.
ATRIBUTOS
ATRIBUTOS COLSPAN E ROWSPAN
Os atributos colspan e rowpan podem ser usados para mesclar células, mas com bom senso pois diminuem a acessibilidade de uma tabela por deixar o código um pouco confuso para dispositvos de acessibilidade.
<table border="1">
<caption>Nome da tabela</caption>
<tr>
<td colspan="2">Linha 1 com 2 Colunas mescladas </td>
</tr>
<tr>
<td rowspan="2">Linhas 2 e 3 mescladas na Coluna 1 </td>
<td>Linha 2 Coluna 2 </td>
</tr>
<tr>
<td>Linha 3 Coluna 2 </td>
</tr>
<tr>
<td>Linha 4 Coluna 1 </td>
<td>Linha 4 Coluna 2 </td>
</tr>
</table>
Resultado:
| Linha 1 com 2 colunas mescladas | |
| Linhas 2 e 3 mescladas na Coluna 1 | linha 2 coluna 2 |
| linha 3 coluna 2 | |
| Linha 4 Coluna 1 | linha 4 coluna 2 |
ATRIBUTO SUMARY
O atributo sumary é muito importante para browsers não visuais. Ele deve oferecer ao usuário uma breve descrição do conteúdo.
<table sumary = "resumo do conteúdo da tabela">
TABELA COMPLETA
Segue abaixo a estrutura completa de uma tabela:
<table border="1" sumary="Descrição do conteúdo"> <caption>Nome da tabela</caption> <thead> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> </thead> <tfoot> <tr> <th scope="col">RODAPÉ 1</th> <th scope="col">RODAPÉ 2</th> </tr> </tfoot> <tbody> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </tbody> </table>
Bom pessoal, nos próximos artigos estarei falando da apresentação e acessibilidade em tabelas.