As tabelas são, possivelmente, um dos itens mais importantes dentro de um site. Elas podem exibir todos os tipos de informações, facilitando a leitura de uma grande quantidade de informações pelo usuário. Na verdade as tabelas são tão flexíveis que podem ser utilizadas para formatar suas páginas como se elas tivessem sido preparadas com um programa de editoração eletrônica.
Se a palavra tabela lembra somente a imagem terrível de um formulário de dados, como os encontrados em páginas impressas, na Web elas são a base das páginas mais atraentes e flexíveis. Nelas você pode colocar de tudo, desde imagens e links, até arquivos de som e vídeo. Claro que, se for o caso, você pode criar uma tabela convencional para exibir dados como uma planilha eletrônica.
A tag para criar uma tabela é:
<TABLE> e </TABLE>
Há diversos atributos para modificar uma tabela. Embora possam parecer confusos, eles são essenciais. Não se preocupe, pois dificilmente você irá precisar digitar todos estes comandos. O próprio editor de hipertexto faz isso, mas você precisa conhecê-los. Isto se aplica a tudo o que se viu até agora.
BORDER=n - define a borda da tabela, sendo que n é o número de pixels da borda.
CELLPADDING=n - define as margens dentro das células
CELLSPACING=n - define o espaço entre as células
ALIGN=center, left, right ou justify - define o alinhamento dos itens da tabela
VALIGN=top, middle, bottom ou baseline - define o alinhamento vertical dos itens da tabela
WIDTH=n ou % - define a largura da tabela, sendo n um valor em pixels ou um percentual da largura da janela do browser
<TR> e </TR> - indica uma linha da tabela
<TD> e </TD> - indica uma célula da tabela
<TH> e </TH> - indica uma célula-título da tabela.
Atributos para <TH> e <TD>:
ALIGN=center, left, right ou justify - define o alinhamento horizontal dentro do conteúdo de cada célula
VALIGN=top, middle, bottom ou baseline - define o alinhamento vertical do conteúdo de cada célula
NOWRAP - impede a quebra da linha do texto da célula
COLSPAN=n - expande a largura da célula, sendo que n é o número de colunas que a célula deve expandir-se
ROWSPAN - expande a altura da célula, sendo que n é o número de linhas que a célula será expandida
WIDTH=n ou % - define a largura da célula
HEIGHT=n ou % - define a altura da célula
BGCOLOR=#nnnnnn - muda a cor de fundo da célula
BACKGROUND="imagem.gif ou imagem.jpg" - coloca uma imagem de fundo na tabela, onde o texto flutua por cima
<CAPTION> e </CAPTION> - indica a legenda da tabela.
Obs.: você não precisa utilizar todos estes atributos. Vai depender de cada caso, mas pode incrementar mais ainda a tabela usando outros recursos, como modificar as fontes. O exemplo de uma tabela simples pode ser:
<TABLE BORDER=2>
<TR>
<TD ALIGN=center ROWSPAN=2> ameixa
<TD COLSPAN=2> banana
</TR>
<TR>
<TD ALIGN=left> caju
<TD ALIGN=right> cereja
</TR>
<TR>
<TD ALIGN=left> damasco
<TD ALIGN=center> graviola
<TD ALIGN=right> jaca
</TR>
<TR>
<TD ALIGN=left> kiwi
<TD ROWSPAN=2 ALIGN=center> laranja
<TD ALIGN=right> lima
</TR>
<TR>
<TD ALIGN=left> manga
<TD ALIGN=right> morango
</TR>
<TR>
<TD ALIGN=left> nectarina
<TD ALIGN=center> pera
<TD ALIGN=right> uva
</TR>
</TABLE>
Clique aqui para ver o exemplo.
<CENTER>
<TABLE BORDER=1>
<CAPTION> <B>Produtos coloniais</B> </CAPTION>
<TR>
<TH ALIGN=center ROWSPAN=2> Produto
<TH COLSPAN=2 ALIGN=center> Preço
</TR>
<TR>
<TH ALIGN=center> Unidade
<TH ALIGN=center> Cento
</TR>
<TR>
<TD ALIGN=center> Cartela de ovos
<TD ALIGN=right> R$ 1,99
<TD ALIGN=right> R$ 180,00
</TR>
<TR>
<TD ALIGN=center> Garrafa de mel
<TD ALIGN=right> R$ 2,50
<TD ALIGN=right> R$ 210,00
</TR>
<TR>
<TD ALIGN=center> Pote de manteiga
<TD ALIGN=right> R$ 3,00
<TD ALIGN=right> R$ 275,00
</TR>
</TABLE>
Clique aqui para ver o exemplo.
