Tabelas

As tabelas têm uma estrutura que se compõe, basicamente, de linhas e colunas, cujas intersecções formam o que se chama de células. Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem.

A tabela é criada pelos comandos <TABLE> e </TABLE>. Entre eles devem ser especificadas as tags responsáveis pela criação das linhas e células.

A tag responsável pela criação das linhas é: <TR> (Abreviação de Table Row). Se uma tabela tiver cinco linhas, deveram ser indicados cinco desses comandos

As tags usadas para especificar o conteúdo de uma célula é a abreviação de Tabel Data, <TD> e </TD>. Para cada célula da linha deve ser usado esse comando. Devem ser usadas depois de cada comando <TR>.

As tags <TH> e </TH>, abreviação de Table Header, tem a mesma função das tags TD, só que o texto é exibido em negrito e centralizado.

Ao lado, temos um exemplo bem simples da utilização desses comandos. Note que existe um atributo BORDER=1 na tag </TABLE>. Esse atributo cria uma borda na tabela. O padrão é que a borda não seja exibida.

<TABLE BORDER=1>
<TR>
<TH>Linha 1 Coluna 1</TH>
<TH>Linha 1 Coluna 2</TH>
<TR>
<TD>Linha 2 Coluna 1</TD>
<TD>Linha 2 Coluna 2</TD>
</TABLE>

Atributos das Tabelas

O comando <TABLE> tem uma série de atributos que controlam desde a cor da borda até o alinhamento da tabela em relação ao texto. Os principais atributos são:

ALIGN : determina o alinhamento da tabela. Pode ser left, right ou center
WIDTH : determina a largura da tabela. Os valores podem ser dados em pixels ou percentagem em relação ao tamanho da janela.
HEIGHT determina a altura da tabela. Os valores podem ser dados em pixels ou percentagem em relação ao tamanho da janela.
BORDER determina a espessura da borda (grade) da tabela.
BGCOLOR determina a cor do fundo da tabela

Existem outros atributos como BORDERCOLOR, BORDERCOLORLIGHT e BORDERCOLORDARK que controlam o sistema de cores da borda da tabela

Veja um exemplo, baseado no código-fonte a baixo, da utilização desses atributos.

<TABLE align= "right " width= "50% " height= "50% " border= "5 " bgcolor= "#FF8080 ">
<TR>
<TH>Linha 1 Coluna 1</TH>
<TH>Linha 1 Coluna 2</TH>
<TR>
<TD>Linha 2 Coluna 1</TD>
<TD>Linha 2 Coluna 2</TD>
</TABLE>

Tabelas Complexas

As vezes é necessário que uma célula ocupe mais de uma linha ou coluna. Isso é possível com inserção de dois atributos nas tags <TH> ou <TD>. Esse atributos são:

COLSPAN : Especifica quantas colunas da tabela a célula pode ocupar

ROWSPAN : Especifica quantas linhas da tabela a célula pode ocupar

Também existem atributos como ALIGN e VALIGN que controlam o alinhamento horizontal e vertical da célula e NOWRAP que indica que o texto da célula não pode ser quebrado para se ajustar ao tamanho da tabela.

Veja um exemplo, baseado no código-fonte acima, da utilização desses atributos.