Olá, Tabelas são usadas para apresentar dados tabulares, isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica.

É difícil?
Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a passo a explicação, verá que tudo é evidentemente facil.

Exemplo 1:

Código:

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Será renderizado no navegador assim:

Célula 1	Célula 2
Célula 3	Célula 4

Qual a diferença entre <tr> e <td>?
Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags.
3 tags básicas são usadas para inserir tabelas!
<table> começa e termina uma tabela. Evidente.
<tr> significa "table row" ( linha de tabela). começa e termina e uma linha horizontal da tabela. Também evidente.
<td> significa "table data" ( dados da tabela ). começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha, <td>Célula 1</td> e <td>Célula 2</td>
A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir.
A nova linha também contém duas células. A tabela termina com </table>.

Para esclarecer, linhas são horizontais e colunas são verticais, ambas contendo células.
Célula 1 e Célula 2 formam uma linha.
Célula 1 e Célula 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.

Exemplo 2:

Código:

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
  <tr>
    <td>Célula 5</td>
    <td>Célula 6</td>
    <td>Célula 7</td>
    <td>Célula 8</td>
  </tr>
  <tr>
    <td>Célula 9</td>
    <td>Célula 10</td>
    <td>Célula 11</td>
    <td>Célula 12</td>
  </tr>
</table>

Será renderizado no navegador assim:

Célula 1	Célula 2	Célula 3	Célula 4
Célula 5	Célula 6	Célula 7	Célula 8
Célula 9	Célula 10	Célula 11	Célula 12

Existem atributos?
Claro! existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de uma borda em volta da tabela.

Exemplo 3:

Código:

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Será renderizado no navegador assim:

Célula 1	Célula 2
Célula 3	Célula 4

A espessura da borda é especificada em pixels. ( Veja na lição 9 )
Tal como fizemos com as imagens, podemos definir ( width = largura em pixels ), para uma tabela ("ou alternativamente") em percentagem da tela.

Exemplo 4:

Código:

<table border="1" width="30%">

Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente você mesmo.

Mais atributos?
Existe uma grande quantidade de atributos para tabelas. A seguir mais dois.

align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula.
Por exemplo, left, center ou right (à esquerda, no centro ou à direita).
valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

Exemplo 5:

Código:

<td align="right" valign="top">Célula 1</td>

Esta tabela renderiza oque foi dito no parágrafo anterior.

O que posso inserir em tabelas?
Teoricamente você pode inserir qualquer coisa em uma tabela, texto, links e imagens... MAS, tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser apresentados em linhas e colunas) então abstenha-se de colocar coisas dentro de tabela simplesmente porque você deseja que elas estejam próximas umas às outras.

Nos primórdios da Internet (isto é, há poucos anos atrás), tabelas eram usadas como ferramenta para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (dica:CSS). Adiante veremos isto.

Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.

Lista de Lições: http://staffergroupbr.stuning.net/t1044-tutorial15-parametros-sobre-html
Próxima Lição: http://staffergroupbr.stuning.net/t1049-licao-11-de-html