Capa
Seções
NOTÍCIAS

DOWNLOAD

ANÁLISES

COMPRAS

BOLETIM

WIRED NEWS

IDG NOW!

PC WORLD

AJUDA

COLUNISTAS


 digite + enter


CURSO BÁSICO DE HTML
Caíque Severo

Tabelas

Como ainda não existem formas mais sofisticadas de controlar o posicionamento de imagens e texto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da página de maneira mais criativa.

Uma tabela simples

As tabelas são compostas de linhas, dentro das quais são colocadas células com o conteúdo. Dentro das células pode-se colocar texto, imagens ou até mesmo outras tabelas. Uma linha pode conter várias células, formando-se então uma tabela com várias colunas.

Os tags para construir uma tabela são:

<TABLE> e </TABLE>: para indicar o início e o fim de uma tabela

<TR> e </TR>: para indicar o início e o fim de uma linha

<TH> e </TH>: para indicar o início e o fim de uma célula-título

<TD> e </TD>: para indicar o início e o fim de uma célula

A única diferença entre o tag <TH> e <TD> é que o primeiro marca o texto da célula com ênfase. Os navegadores interpretam essa ênfase como negrito. Nos exemplos deste livro, não utilizamos o tag <TH>, já que a ênfase pode ser conseguida com tags como <B> e <I>.

Não é obrigatório colocar os tags de fechamento dos elementos da tabela (</TR>, </TH> e </TD>), mas estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag <TABLE>.

<TABLE BORDER>

<TR>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

 

</TABLE>


Exemplo 17: uma tabela simples

O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas. É possível expandir as células para que elas ocupem o espaço de mais de uma coluna ou linha.

<TABLE BORDER=2>

<TR>

<TD COLSPAN=2>Célula expandida</TD>

</TR>

<TR>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

 

</TABLE>


Exemplo 18: expansão da célula em colunas

ou

<TABLE BORDER=3>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

 

</TABLE>


Exemplo 19: expansão de uma célula em linhas

A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na mesma linha das células 1 e 2.

Dimensões da tabela

Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels) de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos através de atributos dentro do tag <TABLE>. Os atributos são:

WIDTH: para definir a largura da tabela

HEIGHT: para definir a altura da tabela

CELLPADDING: para definir a margem dentro das células

CELLSPACING: para definir o espaço entre as células

<TABLE BORDER=1 WIDTH=400 HEIGHT=200 CELLPADDING=20 CELLSPACING=20>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>

<TD>Célula 3</TD><TD>Célula 4</TD>

</TR>

</TABLE>


Exemplo 20: controlando dimensões e espaçamento da tabela

Os atributos width e height também podem ser utilizados para definir o tamanho de células específicas. Neste caso, devem ser colocado dentro do tag <TD> (ou <TH>).

Alinhamento

Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se nenhum alinhamento for definido, o conteúdo das células é alinhado à horizontalmente esquerda e verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal) e VALIGN (alinhamento vertical) devem ser usados dentro dos tags <TR> e <TD> (além de <TH>, se for o caso). Os alinhamentos possíveis são:

Alinhamento horizontal

ALIGN=LEFT: alinha o conteúdo à esquerda

ALIGN=RIGHT: alinha o conteúdo à direita

ALIGN=CENTER: alinha o conteúdo ao centro

Alinhamento vertical

VALIGN=BASELINE: mantém as linhas de texto com o mesmo alinhamento (para ser usado dentro de <TR> ou no primeiro <TD> de uma linha)

VALIGN=TOP: alinha o conteúdo no topo

VALIGN=MIDDLE: alinha o conteúdo ao centro

VALIGN=BOTTOM: alinha o conteúdo na base da célula

Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento padrão.

<TABLE BORDER>

<TR>

<TH>Título 1</TH><TH>Título 2</TH>

</TR>

<TR>

<TD>Célula 1</TD>

<TD><B>Célula 2</B><P>

Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.</TD>

</TR>

</TABLE>


Exemplo 21: um texto longo dentro de uma célula

A largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda coluna. Vamos melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a largura da borda da tabela.

<TABLE BORDER=3>

<TR>

<TH>Título 1</TH><TH>Título 2</TH>

</TR>

<TR>

<TD valign=top>Célula 1</TD>

<TD width=300><B>Célula 2</B><P>

A largura de cada célula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD>

</TR>

</TABLE>


Exemplo 22: controlando a largura das células

Cor de fundo das células

O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada célula. Basta acrescentar o atributo BGCOLOR com a cor desejada aos tags de célula. Em algumas combinações de cores será necessário também modificar a cor das letras. Isso é feito com o atributo COLOR dentro do tag <FONT>.

<TABLE BORDER>

<TR>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Comida</FONT></TH>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Bebida</FONT></TH>

</TR>

<TR>

<TD BGCOLOR=white>Arroz</TD>

<TD BGCOLOR=black><FONT COLOR=WHITE>Vinho</FONT></TD>

</TR>

</TABLE>


» Dicas »

Introdução

Uma página Web simples

Melhorando a aparência

Hyperlinks

Imagens

Tabelas

Dicas

Mapas

Erros mais comuns

Exemplos de páginas Web

Tabela de acentos

Lista de tags

Cores
Copyright© 1996 - 2003 Terra Networks S.A. Todos os direitos reservados. All rights reserved.