Escolar Documentos
Profissional Documentos
Cultura Documentos
TABELAS
As tabelas so muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto
mais profissional e o usurio possa navegar de forma mais eficiente, pois os objetos
podem estar melhor posicionados na home-page.
Vamos discutir, nesta parte, quais so os comandos para se criar uma tabela e mostrar
alguns exemplos. Claro que voc dever praticar e principalmente planejar a sua
tabela, pois sem isso, fica muito difcil de controlar o cdigo HTML da sua home-page.
O comando para se inserir uma tabela <TABLE>; para iniciar uma linha devemos
introduzir a tag <TR> e para uma clula (alguns preferem dizer coluna) <TD>. Todos
estes comandos so encerrados como </TABLE> , </TR> e </TD> respectivamente.
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de
3 colunas por 2 linhas, o cdigo HTML para isso :
<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
61
AG8 Informtica
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como
ficou.
Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo para
se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do
contedo desta tabela.
Nas clulas da tabela voc pode inserir desde simples frases at figuras inteiras.
Parmetros podem ser acrescidos s tabelas, tais como : aumentar ou diminuir a
largura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentro
da clula etc.
Vamos procurar trabalhar com vrios exemplos para visualizarmos melhor o uso destes
parmetros.
<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
O parmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo
acima ou em porcentagem, como mostrado no exemplo a seguir. Tambm dentro da
tag <TD> vemos um outro parmetro que VALIGN=MIDDLE, este parmetro tem por
funo alinhar o contedo da clula no meio da mesma, ou seja, dentro da clula as
frases so alinhadas com relao ao seu centro.
Exemplo2:
<TABLE BORDER=2>
<TR>
<TD WIDTH=25%> WIDTH=25%</TD>
<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>
</TR>
62
AG8 Informtica
2- INSERINDO COR DE FUNDO E SEPARAO DE CLULAS
Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se torna
particularmente til quando se quer dar destaque a uma clula em especial.
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Aqui, vimos que podemos acrescentar cores ao fundo de uma clula, outra coisa que
tambm pode ser feita mudar a fonte com os comandos de formatao que voc j
conhece, como <FONT COLOR=>, por exemplo.
Repare que no exemplo anterior ns colocamos BORDER=0 e as clulas apareceram
coloridas, mas com um certo espaamento entre elas, para tirarmos este espao
devemos acrescentar dentro da tag <TABLE> o parmetro CELLSPACING=0. Este
parmetro elimina por completo os espaos entre as clulas.
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
63
AG8 Informtica
Outro parmetro que pode ser usado para separar espaos em uma clula
CELLPADDING que inclui ou exclui espaos dentro da clula, ou seja, se voc tiver
um elemento (frase, texto, figura etc.) dentro da clula voc pode acrescentar espaos
por igual nos quatros cantos da clula, fazendo com que seu texto ou figura no fique
"grudado" nas paredes da clula. Aproveite os exemplos anteriores e experimente usar
este atributo para ver como ele funciona.
Isto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dos
alinhamentos que encontramos na Internet so feito por intermdio de tabelas.
Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar o
uso de tabelas.
64
AG8 Informtica
</TABLE>
Repare neste exemplo, que a legenda j sai centralizada com relao a tabela e repare
no espao dentro da clula devido ao comando CELLPADDING.
65
AG8 Informtica
5-USANDO TABELAS COMO MOLDURAS
Um outro uso bastante interessante de tabelas como moldura para alguma figura.
Para isto basta voc iniciar uma tabela e definir um valor para BORDER.
Exemplo:
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>
Claro que voc deve usar com muito bom senso este artifcio da tag <TABLE>, pois
nem sempre uma moldura em uma figura defini um bom layout (aparncia) da sua
home-page.
7- O atributo RULES
Para escolher as linhas internas que sero mostradas dentro da tabela , usamos o
atributo RULES , dentro da tag <TABLE> . Os complementos desse atributo so :
66
AG8 Informtica
Veja uma tabela com todas as linhas internas ( default ) :
<TABLE BORDER RULES=all>
Outro exemplo sem as linhas internas :
<TABLE BORDER RULES=none>
Outro exemplo usando o complemento ROWS:
<TABLE BORDER RULES=rows>
O ltimo exemplo usar o complemento COLS :
<TABLE BORDER RULES=cols>
As tabelas so um forte recurso de modelagem das home-pages hoje em dia e para
que voc consiga utilizar bem este recuso no deve se limitar somente aos exemplos
desta apostila, procure em sites e at mesmos em livros , como por exemplo: "Criando
sites arrasadores na Web" (captulo 4) ou "HTML Truques Espertos" (captulo 5).
Nessas referncias voc poder encontrar vrios outros exemplos de pginas usando
tabelas mais complexas (como por exemplo, uma tabela peridica dos elementos) e
claro em laboratrio desenvolvendo sua prpria home-page.
H uma observao importantssima que devemos fazer aqui. Como j vimos antes,
alguns comandos HTML no funcionam em um dado navegador, se voc reparou para
falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos :
Internet Explore 4.0 e no Netscape Communicator 4.0. Voc no reparou nenhuma
diferena no uso destes navegadores para nossos exemplos, a questo que para
tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta
estes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico uso de
CELLSPACING e CELLPADDING.
Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo
quanto a padronizao de seus navegadores. Sendo assim, quando voc construir
tabelas deve sempre levar em conta em qual navegador voc dar preferncia para
rodar a sua pgina. Por isso nunca demais deixar claro sua home-page em qual
navegador ela roda melhor a sua formatao.
67