Comando <TABLE>...</TABLE>
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis. O comando TABLE define a tabela: Um de seus atributos básico é BORDER que indica se a tabela terá uma borda ou não.

       <TABLE WIDTH=tamanho
          BORDER="borda"
          WIDTH="tamanho"
          HEIGHT="altura"
          BGCOLOR="cor de fundo"
          BACKGROUND="imagem de fundo"
          ALIGN="alinhamento">
    ...
    </TABLE>

Principais Atributos

Código Finalidade
<CAPTION>...</CAPTION> define o título da tabela
<TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>)
<TR>...</TR> delimita uma linha
<TD>...</TD> delimita um elemento ou célula (dentro de <TR>)
<BGCOLOR="#999999"> Define uma cor de fundo para a tabela, linha ou elemento.
<CELLPADDING="99"> Define o espaço entre o conteúdo e a borda da célula.
<CELLSPACING="99"> Define o tamanho do espaço da borda entre as células.

Veja o código necessário para definir uma tabela simples:

Código Resultado
<TABLE BORDER=4>
<CAPTION>Primeiro exemplo</CAPTION>
<TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>
<TR><TD>linha1,coluna1</TD><TD>linha1,coluna 2</TD></TR> <TR><TD>linha2,coluna1</TD><TD>linha2,coluna 2</TD></TR>
</TABLE>
Primeiro exemplo
Coluna 1 Coluna 2
linha1,coluna1 linha1,coluna2
linha2,coluna1 linha2,coluna2

Veja o exemplo abaixo, onde podemos definir títulos compreendendo mais de uma coluna ou linha. É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas). Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

Código Resultado
<TABLE BORDER=1>
<TR><TH
COLSPAN=
2>Colunas 1 e 2</TH></TR>
<TR><TD>L1,C1</TD><TD>L1,C2</TD></TR>
<TR><TD>L2,C1</TD><TD>L2,C2</TD></TR>
<TR><TH
ROWSPAN=
3>3 linhas</TH><TD>1 linha</TD></TR>
<TR><TD>2 linhas</TD></TR>
<TR><TD>3 linhas</TD></TR>
</TABLE>
Colunas 1 e 2
L1,C1 L1,C2
L2,C1 L2,C2
3 linhas 1 linha
2 linhas
3 linhas

Tabelas podem ser definidas sem borda. Pode ser interessante para aplicações onde é necessário alinha textos e figuras mais facilmente ou ainda para colocar uma coluna com índice ao lado da sequência do texto normal. Veja o mesmo exemplo acima agora sem borda:

Código Resultado

<TABLE BORDER=0>
<TR><TH
COLSPAN=
2>Colunas 1 e 2</TH></TR>
<TR><TD>L1,C1</TD><TD>L1,C2</TD></TR>
<TR><TD>L2,C1</TD><TD>L2,C2</TD></TR>
<TR><TH
ROWSPAN=
3>3 linhas</TH><TD>1 linha</TD></TR>
<TR><TD>2 linhas</TD></TR>
<TR><TD>3 linhas</TD></TR>
</TABLE>
Colunas 1 e 2
L1,C1 L1,C2
L2,C1 L2,C2
3 linhas 1 linha
2 linhas
3 linhas

Tabelas podem ser definidas com uma cor de fundo, que vai se aplicar a todas as células da tabela. Podemos ainda definir um valor para colocar um espaço maior entre as células, com o atributo CELLPADDING, e o atributo CELLSPACING pode ser usado para colocar bordas maiores entre as células. Veja o exemplo abaixo:

Código Resultado
<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=5 BGCOLOR="#E1FFD9">
janeiro fevereiro março
abril maio junho

Tabelas podem ser definidas com cores específicas para as bordas. Veja no exemplo abaixo:

Código Resultado
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">
janeiro fevereiro março
abril maio junho

Nas tabelas pode ser colocado um fundo como uma imagem. O formato é similar a colocação de uma imagem na página, ou seja, usa-se o comando BACKGROUND. Veja o exemplo abaixo:

Código Resultado
<TABLE BORDER=5 BACKGROUND="imagem3.GIF">
janeiro fevereiro março
abril maio junho