Por um bom tempo as tabelas foram 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.

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 curso de editores visuais de HTML, que ainda oferecem recursos para a criação de layouts em tabelas, advirto aos meus alunos a não usar esses recursos e estudar HTML e CSS para criarem layouts otimizados.

Minha intenção aqui é mostrar alguns recursos para tabelas de dados tabulares. Existem recursos poucos explorados nas tabelas. Esses recursos melhoram a acessibilidade das tabelas e também melhoram a semântica do conteúdo.

Inicialmente falarei sobre as tags HTML das tabelas e no próximo tutorial falarei sobre como apresentar corretamente as tabelas com CSS.

TAGS HTML

As tags mais usadas em tabelas são:

. table - 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. Mas como estamos somente conhecendo as tags HTML vamos usá-lo, mas 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:

Dica: Todas as tags de dados <td> devem possuir algum conteúdo. Caso elas precisem ficar vazias use o caractere especial de espaço (&nbsp;).

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:

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 legendas de coluna e row para legendas 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:

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>

Resultado:

As tags <thead>, <tbody> e <tfoot> são ignoradas no Netscape 4.

Na impressã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 IE7 beta 3, Firefox 1.5, Ópera e Amaya da W3 e 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. Se não quiser ter esse trabalho baixe esse arquivo de exemplo.

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:

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, na segunda parte do artigo estaremos usando CSS para alterarmos a apresentação de uma tabela.

Abraços!