Uma tabela é um conjunto de células organizadas dentro das quais podemos alojar distintos conteúdos.

À princípio, poderia parecer que as tabelas são raramente úteis e que podem ser utilizadas simplesmente para listar dados como agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade.

Hoje, grande parte dos desenhadores de páginas baseia seu planejamento neste tipo de engenhoca. De fato, uma tabela nos permite organizar e distribuir os espaços da melhor forma. Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas seções da página ou colocar de uma maneira simples uma legenda a uma imagem.

Pode ser que a princípio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos criar uma página de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que nos oferecem.

Para começar, nada mais simples do que pelo princípio: as tabelas são definidas pelas etiquetas <table> e </table>

Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que darão forma e conteúdo à tabela.

As tabelas são descritas por linhas da esquerda para direita. Cada uma destas linhas é definida por outra etiqueta e seu fechamento: <tr> e </tr>

Ainda assim, dentro de cada linha, haverá diferentes células. Cad uma dessas células será definida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta será onde colocaremos nosso conteúdo.

Aqui temos um exemplo de estrutura de tabela:

<table>
<tr>
<td>Célula 1, linha 1</td>
<td>Célula 2, linha 1</td>
</tr>
<tr>
<td>Célula 1, linha 2</td>
<td>Célula 2, linha 2</td>
</tr>
</table>

O resultado:
Célula 1, linha 1 Célula 2, linha1
Célula 1, linha 2 Célula 2, linha 2

NOTA: Até aqui vimos todas as etiquetas que necessitamos conhecer para criar as tabelas. Existem outras etiquetas, mas o que podemos conseguir com elas se pode conseguir também usando as que já vimos.

Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma célula cujo conteúdo esteja formatado como um título ou cabeçalho da tabela. Na prática, o que faz é colocar em negrito e centralizado o conteúdo dessa célula, o que se pode conseguir aplicando as correspondentes etiquetas dentro da célula. Assim:

<td align="center"><b>Conteúdo da célula</b></td>

A partir desta idéia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de atributos aplicados sobre cada tipo de etiquetas que as compõem. Ao longo dos próximos capítulos nos aprofundaremos no estudo desses atributos de forma a proporcionar-lhe tudo que é útil e indispensável para um bom arranque em páginas.
Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes:

align	Alinha horizontalmente a tabela em relação ao seu entorno.
background	Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
bgcolor	Dá cor de fundo à tabela.
border	Define o número de pixels da borda principal.
bordercolor	Define a cor da borda.
cellpadding	Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.
cellspacing	Define o espaço entre as bordas (em pixels).
height	Define a altura da tabela em pixels ou porcentagem.
width	Define a largura da tabela em pixels ou porcentagem.

Os atributos que definem as dimensões, height e width, funcionam de uma maneira análoga ao das células, tal como vimos no capítulo anterior. Contrariamente, o atributo align não nos permite justificar o texto de cada una das células que compõem a tabela, mas sim que permite, justificar a própria tabela em relação ao seu entorno.

Vamos colocar três exemplos de alinhamento de tabelas, centralizadas, alinhadas à direita e à esquerda.

Exemplo de tabela centralizada	Esta tabela está centralizada (aling="center"). Tem somente uma célula. Este seria um texto qualquer colocado ao lado de uma tabela centralizada.
Exemplo de tabela alinhada à direita	Esta tabela está alinhada à direita (aling="right"). Tem somente uma célula. Para que seja visto o efeito de alinhamento da tabela devemos colocar um texto ao lado e o texto irá rodear a tabela, assim como ocorreria como as imagens alinhadas a um lado.
Exemplo de tabela alinhada à esquerda	Esta tabela está alinhada à esquerda (aling="left"). Tem somente uma célula. Para que seja visto o efeito de alinhamento da tabela, devemos colocar um texto ao lado e o texto irá rodear a tabela, assim como ocorreria com as imagens alinhadas a um lado.

Os atributos cellpading e cellspacing ajudarão a dar a nossa tabela um aspecto mais estético. À princípio pode nos parecer um pouco confuso seu uso mas com um pouco de prática já será suficiente para saber utilizá-los.

Na seguinte imagem podemos ver graficamente o significado destes atributos:

Você mesmo pode comprovar que os atributos definidos para uma célula têm prioridade em relação aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma das células com a cor de fundo verde. E assim, toda a tabela será vista de cor vermelha manos a célula verde. Da mesma forma, podemos definir uma cor azul para as bordas da tabela e fazer com que uma célula particular seja mostrada com uma borda vermelha. (Apesar de que isto não funcionará em todos os navegadores devido ao fato de alguns não reconhecerem o atributo bordercolor.)

Tabela de cor vermelha de fundo	O atributo bgcolor da tabela está em vermelho.
Célula normal	Esta célula está em verde. Tem o atributo bgcolor na cor verde

Tabelas aninhadas

O uso de tabelas aninhadas também é muito útil. Da mesma forma que podíamos incluir listas dentro de outras listas, as tabelas podem ser incluídas dentro de outras. Assim, podemos incluir uma tabela dentro da célula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situação pode se complicar se o número de tabelas incluídas dentro de outras for elevado.

Vamos ver um código de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o código, pois assim conseguiremos entendê-lo melhor.

Célula da tabela principal

Tabela aninhada, célula 1 Tabela aninhada, célula 2 Tabela aninhada, célula 3 Tabela aninhada, célula 4

Este seria o código:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
    <td align="center">
    Célula da tabela principal
    </td>
    <td align="center">
        <table cellspacing="2" cellpadding="2" border="1">
        <tr>
            <td>Tabela aninhada, célula 1</td>
            <td>Tabela aninhada, célula 2</td>
        </tr>
        <tr>
            <td>Tabela unida, célula 3</td>
            <td>Tabela aninhada, célula 4</td>
        </tr>
        </table>
    </td>
</tr>
</table>

Exemplos práticos

Estas são as informações que pretendíamos transmitir-lhes sobre as tabelas em HTML. Agora seria importante fazer algum exemplo de realização de uma tabela um pouco mais complexa. Por exemplo, a seguinte:

Animais em perigo de extinção
Nome	Cabeças	Previsão 2010	Previsão 2020
Baleia	6000	4000	1500
Urso Pardo	50	0
Lince	10
Tigre	300	210

Outro exemplo de tabela com a qual podemos praticar:

Climas de América do Sul
Venezuela Colômbia Equador Perú Norte da América de Sul. Países como:	Argentina Chile Uruguai Paraguai Sul da América do Sul. Países como:
Floresta tropical, clima de savana, clima marítimo com invernos secos.	Climas marítimos com verões secos, com invernos secos, climas frios, clima de estepe, clima desértico.

Fonte: http://www.criarweb.com