<TABLE> - Para inserir a tabela.
<TR> - Para inserir uma linha
<TD> Para inserir uma coluna

Para fechar estas TAGS utilizamos </TD>, </TR> e </TABLE>.

Como a tabela mais simples tem somente um célula e esta é formada por uma linha e uma coluna, a tabela mais simples fica assim:

Note, no exemplo, que primeiro abrimos uma linha para depois abrir uma coluna.
Note, também, que primeiro fechamos a coluna para depois fechar a linha.
Faça sempre assim!!

---

Importante: Os dados, imagens e etc, dentro de uma tabela, devem ser inseridos somente entre as tags <TD> </TD>.

---

Agora vamos para um exemplo mais complicado: Uma tabela com duas linhas e duas colunas:

Regra básica: Numa linha podemos colocar N colunas , mas se quisermos ter outra linha na tabela, devemos colocar exatamente o mesmo número de colunas que a primeira linha. (Fugir desta regra é possível, mas será apresentada em outra aula).

Veja o resultado no Navegador Internet Explorer:


Propriedades das Tabelas

Existem vários atributos que podemos configurar nas tabelas, tais como colocar bordas, aumentar o tamanho e cor das bordas, adicionar plano de fundo em cada célula, aumentar ou diminuir a largura de uma célula, inserir cor de fundo dentro da célula etc.

Atributos do comando <TABLE>

Atributo Border - Especifica a visibilidade da borda e ou a espessura da borda
Por padrão uma tabela não apresenta bordas. Quando utilizamos o atributo border com valor diferente de zero definimos sua visibilidade e proporcional espessura. Nos dois primeiros exemplos desta página o atributo border foi utilizado com dois pixels de espessura.

Atributo bordercolor - define a cor de toda borda

Exemplo:

<TABLE border="10" bordercolor="red">
<TR>
<TD>Oh Yes!!</TD>
</TR>
</TABLE>

Efeito:

Oh Yes!!

Atributo bordercolorlight - define a cor da borda lateral esquerda e superior
Atributo bordercolordark - define a cor da borda lateral direita e inferior

Exemplo:

<TABLE border="10" bordercolorlight="yellow" bordercolordark="purple">
<TR>
<TD>YMCA!!</TD>
</TR>
</TABLE>
Efeito:

YMCA!!

Atributo WIDTH - define a largura da tabela. Pode ser configurado em numero de pixel ou em porcentagem
Atributo HEIGHT - define a altura da tabela. Pode ser configurado em numero de pixel ou em porcentagem

Exemplo:

<TABLE border="2" width="50%" height="80">
<TR>
<TD>YMCA!!</TD>
</TR>
</TABLE>
Efeito:

YMCA!!

Atributo Background - Insere uma imagem de plano de fundo na tabela. Use somente imagens GIF ou JPG.

Exemplo:

<table background="yoshi.gif" border="1" bordercolor="blue" width="160" height="210">
<TR>
<TD> Olá Pessoal</TD>
</TR>
</TABLE>
Efeito:

Olá Pessoal

Atributo Cellspacing - Define, em pixels, um espaço entre as células da tabela.

Exemplo:

<table border="2" width="240" height="120" cellspacing=10>
<TR>
<TD> <font face=wingdings size=6> J </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=6> K </font> </TD>
</TR>
</TABLE>
Efeito:

JKL

JKL

Atributo Cellpadding - Define, em pixels, um espaço entre o conteúdo da célula e suas margems.

Exemplo:

<table border="2" width="240" height="120" cellspacing=10 cellpadding=20>
<TR>
<TD> <font face=wingdings size=6> JKL </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=6> JKL </font> </TD>
</TR>
</TABLE>
Efeito:

JKL

JKL

Atributo Frame - Este atributo tem por finalidade definir quais as bordas externas, da tabela, serão visíveis.

Os valores possíveis para este atributo são estes:

ABOVE - Borda externa visível será somente a superior

BELOW - Borda externa visível será somente a inferior

LHS - Borda externa visível será somente a esquerda

RHS - Borda externa visível será somente a direita

VOID - Nenhuma Borda externa ficará visível

BOX ou BORDER - Todas as Bordas externas ficarão visíveis

HSIDES - As Bordas externas visíveis seráo a inferior e a superior

VSIDES - As Bordas externas visíveis serão a esquerda e a direita

Atributo RULES - Define quais bordas internas, da tabela, serão visíveis.

Seus valores podem ser:

ALL - Todas as Bordas interiores visíveis

NONE - Nenhuma Borda interior visível

COLS - Bordas interiores verticais visíveis

ROWS - Borda interiores horizontais visíveis

GROUPS - Bordas em um grupo de células definidas pelos atributos THEAD, TFOOT, TBODY, COLGROUP e COL (serão estudadas em outra oportunidade)

Exemplos do uso de Frame e Rules: 

Para um melhor controle do resultado visual, de sua tabela, é recomendado utilizar os atributos Frame e Rules em conjunto, como nos exemplos a seguir:

---

<table bgcolor="#FFFFCC" border="4" width="240" height="120" frame="box" rules="none"> <TR> <TD> <font face=wingdings size=6> J </font> </TD> <TD> <font face=wingdings size=6> J </font> </TD> </TR> <TR> <TD> <font face=wingdings size=6> J </font> </TD> <TD> <font face=wingdings size=6> J </font> </TD> </TR> </table>

Efeito J J J J

---

<table bgcolor="#66FFFF" border="4" width="240" height="120" frame="void" rules="all"> <TR> <TD> <font face=wingdings size=4> J </font> </TD> <TD> <font face=wingdings size=4> J </font> </TD> </TR> <TR> <TD> <font face=wingdings size=4> J </font> </TD> <TD> <font face=wingdings size=4> J </font> </TD> </TR> </table>

Efeito J J J J

---

<table bgcolor="#FFFF00" border="4" width="240" height="120" frame="hsides" rules="cols"> <TR> <TD> <font face=wingdings size=4> J </font> </TD> <TD> <font face=wingdings size=4> J </font> </TD> </TR> <TR> <TD> <font face=wingdings size=4> J </font> </TD> <TD> <font face=wingdings size=4> J </font> </TD> </TR> </table>

Efeito J J J J

Exercício
Tente fazer uma página semelhante a proposta abaixo, usando somente 1 tabela (vc vai usar quase todos os atributos de <TABLE> apresentados nesta aula.
Regras do Jogo: Adicione um background a sua tabela a torne mais interessante do que a apresentada abaixo, mas cuidado com o contraste entre background e o texto. Você pode modificar a vontade as cores e tipos de fontes do texto, trocar as cores das bordas. A imagem da página é a do antigo, bom e famoso seriado "O gordo e o Magro". Para encontrá-la vá na página do google, clique na opção IMAGENS e procure pelas palavras chaves "O Gordo e o Magro".
Você não pode usar os comandos das aulas posteriores a esta!

Clique aqui para ver a imagem da página sugerida