Tabelas auxiliam na visualização de dados ou na divisão de sua página em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que você desenhar ia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela é o table e aqui segue um exemplo simples de tabela:

<table border="1"> 
<tr> 
<td>Primeira</td> 
<td>Segunda</td> 
</tr> 
<tr> 
<td>Terceira</td> 
<td>Quarta</td> 
</tr> 
</table>

Em HTML, as tabelas são divididas em linhas e células. Na tabela acima, a primeira linha contém as células Primeira e Segunda, enquanto que a segunda linha contém as células Terceira e Quarta.

Dentro de um bloco table, os principais elementos que você utilizará são o tr, ou table row (linha), e o td, ou table data (célula). Dessa forma, podemos definir as linhas e as células da tabela. É mandatório que um bloco td esteja def inido dentro de um bloco tr, ou seja, que as células estejam dentro de linhas.

No exemplo anterior, criamos uma linha com tr e em seguida, dentro de um bloco td, escrevemos o texto da célula (Primeira). Abrimos outro bloco td nesse mesmo bloco tr, onde colocamos o texto da segunda célula (Segunda). Depois, fechamos a linha com o </tr> para em seguida abrir uma nova linha, onde criamos as células contendo os textos Terceira e Quarta.

O atributo border no elemento table serve para dar borda à tabela. Sem o ele não ficaria muito distinto onde começa e termina cada uma das células:

<table>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Dentro de um bloco td é possível colocar códigos HTML e inclusive criar até tabelas dentro de células! Veja só:

<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>
<table border="1">
<tr>
<td>Quar ta</td>
<td>Quinta</td>
</tr>
</table>
</td>
</tr>
</table>

O código fica complicado o tanto quanto se queira.

Agora que você captou a essência das tabelas, vamos mostrar dois três atributos que podem ser utilizados em tabelas.

1. Espaçamento entre células

Para controlarmos a distância entre duas células, utilizamos o atributo cellspacing, cujo argumento é dado em pixels:

<table cellspacing="20" border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Para controlar o espaçamento vertical, utilizamos o cellpadding:

<table cellspacing="20" cellpadding="35" border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

2. Preenchimento de células

Pode ser que você queira uma tabela onde a primeira linha tenha duas células, a segunda com apenas uma célula e a terceira com três células. Faremos o seguinte:

<table border="1"> 
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table> 

Percebeu como a tabela ficou cheia de "buracos"?! Para que as células preencham os buracos, utilizaremos o atributo colspan:

<table border="1">
<tr>
<td>Primeira</td>
<td colspan="2">Segunda</td>
</tr>
<tr>
<td colspan="3">Terceira</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>

Da mesma forma, se quisermos uma coluna com apenas uma célula e outra com duas, poderíamos usar o atributo rowspan. Veja a diferença entre usarmos e não usarmos o rowspan:

<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>

Agora com rowspan:

<table border="1">
<tr>
<td rowspan="2">Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>

3. Largura de células e tabelas

Para escolher a largura de tabelas e células, utiliza-se o já conhecido atributo width, cujo argumento é idêntico para o caso de imagens:

<table border="1" width="200">
<tr>
<td width="30%">Primeira</td>
<td width="70%">Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Note que quando o width é utilizado com o elemento table, a largura referese à largura da página, enquanto que quando usado dentro de um td a largura é referente ao tamando da tabela. Isso tudo desde que o argumento seja dado em porcentagem e não em pixels.

4. Uso de tabelas

Aqui exploramos poucas possibil idades das tabelas HTML. Você pode utilizálas para construir uma simples caixa para exibição de informações como fazer uma página inteira utilizando tabelas. Existem muitos outros elementos e atributos para ajudá-lo nessa tarefa. Consulte as referências para mais informações sobre tabelas.

5. Dicas

Os elementos <thead>, <tbody> e <tfoot> ainda são pouco usados devido ao suporte deficiente oferecido pelos navegadores antigos. Os navegadores modernos já suportam bem estes elementos.

6. Elementos relativos a tabela

• <table> - Define uma tabela;
• <th> - Define um cabeçalho para uma tabela;
• <tr> - Insere uma nova linha numa tabela;
• <td> - Insere uma célula numa tabela;
• <caption> - Define uma legenda para uma tabela;
• <colgroup> - Agrupa colunas numa tabela;
• <col> - Define os valores dos atributos para uma ou mais colunas da tabela;
• <thead> - Define um cabeçalho de uma tabela;
• <tbody> - Define um corpo numa tabela;
• <tfoot> - Define o rodapé de uma tabela.