Exemplo 17: uma tabela simples
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.
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.
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>).
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
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>