Criando tabelas

A grande lista
Confira a Grande Lista de Tags HTML
É um guia de referência em uma única página para impressão com todas as tags de HTML apresentadas neste artigo - de fácil acesso e em formato PDF para impressão mais fácil!
Atualmente, uma das ferramentas HTML mais usadas para criar páginas com visual mais organizado é a tabela. Quando você fica craque em tabelas, não apenas "cria" uma página, mas "desenha" uma.

A variedade de tabelas disponíveis é grande, e varia desde uma caixa simples até layouts bem complexos. Falaremos aqui sobre o básico das tabelas e também sobre alguns truques e dicas para você experimentar, para que você desenhe uma página legal e que as pessoas gostem de visitar.

Assim como toda informação que você quiser exibir na janela do navegador, a tabela também deve estar entre as tags <body> e </body> do seu documento HTML. Comece a tabela com a tag a seguir:

<table>

Cada linha horizontal em uma tabela começa com a tag:

<tr>

E cada conjunto de dados dentro da linha começa com a tag:

<td>

Pense na seguinte tabela:

A1 A2
B1 B2
C1 C2

Aqui temos três linhas e duas colunas.

Para criar o esqueleto desta tabela, as tags a seguir são usadas nesta ordem:

<table> inicia a tabela
<tr> inicia a primeira linha
<td> inicia a primeira "célula" de dados (A1)
</td> fecha a célula A1
<td> inicia a segunda célula (A2)
</td> fecha a célula A2
</tr> fecha a primeira linha
<tr> inicia a segunda linha
<td> inicia a primeira célula de dados da segunda linha (B1)
</td> fecha a célula B1
<td> inicia a célula B2
</td> fecha a célula B2
</tr> fecha a segunda linha
<tr> inicia a terceira linha
<td> inicia a primeira célula de dados da terceira linha (C1)
</td> fecha a célula C1
<td> inicia a célula C2
</td> fecha a célula C2
</tr> fecha a terceira linha
</table> fecha a tabela

Muitos designers gostam de recuar o texto do código para facilitar a leitura. Um exemplo de recuo é mostrado mais adiante.

Agora vamos adicionar dados e uma borda ao esqueleto da tabela. A borda é o contorno da tabela. A tag de borda (border="value") é colocada dentro da tag inicial da tabela. Você pode especificar a espessura do contorno, determinando um valor (vamos estabelecer o valor "1"). Uma boa idéia é experimentar valores diferentes para descobrir como eles ficam quando são exibidos no navegador. Se você não quiser bordas, coloque o valor "0".

(Observação: Mesmo que você não queira uma borda em volta da sua tabela, é sempre bom começar com uma borda visível, pelo menos até você resolver os "bugs" que podem afetar a forma como sua tabela é exibida.)

Digite (ou copie e cole) o código e os dados a seguir no seu documento HTML: 

  
   
    A1        A2       
   
    B1        B2       
   
    C1        C2

A tabela exibida no seu navegador deve ficar bem parecida com o diagrama do começo desta seção.

Há muitos atributos que você pode usar na tabela. A seguir discutiremos algumas tags para você formatar sua tabela de um jeito bem criativo.

Cor de fundo
Mude a cor de fundo (background color) da tabela toda com a tag "bgcolor" dentro da tag "table" inicial:

Exemplo: <table bgcolor="yellow">

Uma cor de fundo também pode ser atribuída a uma linha ou a uma célula dentro da tabela. Basta adicionar bgcolor="cor" à tag <tr> ou <td> para colorir aquela parte específica da tabela.

Exemplo: <tr bgcolor="yellow">

Tamanho da tabela
A largura (width) e altura (height) das linhas e colunas em uma tabela vão expandir automaticamente para acomodar a quantidade de dados e/ou o espaço da janela do navegador. Para especificar a largura e altura, coloque valores em pixels ou porcentagem dentro da tag "table" inicial:

Exemplo: <table width=300 height=400>

Largura e altura podem também ser especificadas para uma célula individual, em relação à tabela como um todo. Adicione width="valor" à tag <tr> ou <td> em questão.

É bom experimentar valores em pixels e em porcentagens para descobrir como eles ficam quando são exibidos no browser.

Preenchimento de célula (cellpadding)
A tag "cellpadding" especifica (em pixels) o espaço entre a borda de cada célula e os dados dentro de cada célula. Use este atributo dentro da tag "table":

Exemplo 1: <table border=1 cellpadding=5>

Esta tabela tem cellpadding "5".

Exemplo 2: <table border=1 cellpadding=15>

Esta tabela tem cellpadding "15".

Espaçamento de célula (cellspacing)
A tag "cellspacing" especifica (em pixels) o espaço entre uma célula e outra. Use este atributo dentro da tag "table":

Exemplo 1: <table border=1 cellspacing=5>

Esta tabela tem cellspacing "5".

Exemplo 2: <table border=1 cellspacing=15>

Esta tabela tem cellspacing "15".

Cabeçalhos de tabela
Para criar um "cabeçalho" em negrito e centralizado para uma coluna ou linha dentro da tabela, use a tag <th> no lugar da tag <td> no código para a primeira linha.

Exemplo: 

  
   
    Column 1        Column 2       
   
    A        B       
   
    C        D

Fica assim:

Coluna 1 Coluna 2
A B
C D

Alinhamento
Por padrão, todos os conteúdos das células dentro de uma tabela (com exceção dos cabeçalhos) são centralizados verticalmente e justificados à esquerda. Para mudar o alinhamento do conteúdo de uma célula, coloque as tags a seguir dentro das tags <td>, <th> ou <tr>:

No alinhamento horizontal, os valores podem ser "left" (esquerda), "right" (direita) ou "center" (centro):

    Exemplo: <tr align="center">

Para alinhamento vertical, os valores podem ser "top" (topo), "bottom" (base) ou "middle" (meio):

    Exemplo: <td valign="top">

Você pode também definir um alinhamento para a tabela inteira, estabelecendo o lugar onde ela aparece na página. Ao inserir as tags <align="right"> ou <align="left"> dentro da tag "table" inicial, o texto vai ficar em volta da tabela onde quer que ela esteja localizada. Ou, se você quiser que a tabela fique sozinha e sem texto à sua volta, use tags "division alignment" (divisão de alinhamento) antes e depois da tabela inteira.

Extensão de célula (cellspanning)
O "spanning" acontece quando uma célula ocupa o lugar de duas ou mais células na tabela. Um exemplo de spanning de coluna:

Esta célula ocupa a largura de duas colunas Esta célula ocupa a largura de uma coluna
A B C

A tag <colspan=value> é colocada dentro da tag <td> onde ela se aplica. O código que foi escrito para o exemplo acima é: 

  
   
    Esta célula ocupa a largura de duas colunas        esta célula ocupa a largura de uma coluna       
   
    A        B        C

Um exemplo de spanning de linha:

Esta célula ocupa a altura de duas linhas A B
C D

A tag <rowspan=value> é colocada dentro da tag <td> de onde ela se aplica. O código que foi escrito para o exemplo acima é: 

  
   
    Esta célula ocupa a altura de duas linhas        A        B       
   
    C        D

Você também pode aplicar na sua tabela muitos outros atributos que aprendeu no último capítulo, como tamanho, tipo e cor de fonte, inserir uma imagem, fazer uma lista e adicionar um link. Basta adicionar a tag apropriada na célula que você quer formatar, logo após a tag <td> dessa célula.

Experimente e pratique as várias ferramentas e tags que aprendeu neste artigo. As possibilidades são infinitas quando se trata de usar tabelas em uma página de Internet. Agrupe imagens e caixas coloridas sem borda para criar designs limpos, ou coloque tabelas sem borda dentro de tabelas sem borda, algumas com cor, outras sem, para criar layouts atraentes. Os limites de design de uma página de Internet se expandem com um pouco de imaginação, criatividade e um bom uso de tabelas.

Recursos
  • Grande Lista de tags de HTML da HowStuffWorks - guia de referência para impressão que contém todas as tags de HTML mais comuns em uma única página