Até agora você tem background, elementos gráficos, imagens e textos na sua home page. Chegou a hora de organizar esses elementos no corpo da página. É aqui que entram as tabelas. Com elas, e um pouco de criatividade, você pode controlar vários aspectos ligados a formatação, como colocar textos, listas, imagens ou animações em qualquer ponto da página. Eu digo que as tabelas estão para a formatação como uma "folha de papel milimetrado" está para a redução ou ampliação de um desenho. Aprender a usar tabelas é, assim, como você vê, coisa indispensável.
Bem, começando do começo, a dica número um para se trabalhar com tabelas e torná-las visíveis. Então, veja, por exemplo, o que fiz com a página inicial do Universo OnLine. Eu coloquei bordas nas tabelas, retirei todos os links e substitui as imagens por linha.gif com o mesmo width e height. Ficou assim.
Analisando o "código source" da página (ver Engenharia reversa, abaixo) fica mais fácil visualizar as tabelas e os vários atributos utilizados:
Width e Height - para controlar a largura e a altura das tabelas
Border - para acrescentar bordas ou molduras
Cellpadding - regula o espaço entre o conteúdo de uma célula e a sua borda Cellspacing - controla o espaço entre as células
Align e Valign - alinhamentos horizontais e verticais Colspan e Rowspan - para a expansão horizontal e vertical das células
Se você quer entender melhor como funcionam os atributos e os tags necessários para criar uma tabela, o tutorial do Instituto de Ciências Matemáticas e de Computação (ICMC), da USP, apresenta definições e exemplos ótimos e muito detalhados. Clique aqui.
Como você viu podemos usar percentuais (%) tanto nas tabelas como nas células. Nas tabelas para especificar o espaço disponível da tela que ela irá ocupar. Uma tabela com width=100%, por exemplo, ocupará a tela inteira, independente da resolução de vídeo usada (640, 800 ou 1024). Para causar uma boa apresentação, as tabelas do menu cacos do caleidoscópio foram feitas desta forma. Clique aqui para dar uma olhada: menu cacos.
Nos TDs os percentuais são usados para expandir as células além do limite do seu conteúdo. Associados aos atributos de cor de fundo (bgcolor) e cor de borda (bordercolor) podem produzir efeitos bem interessantes. O site Bibi-piaf usou esse recurso no design.
Mas, as vezes, usar percentuais para expandir células ou tabelas não é a melhor solução. Um poema como "VideoGame", por exemplo, tem 20 células dispostas lado a lado com o rolamento para o lado direito. O cálculo dos percentuais, neste caso, é mais complicado do que usar a dica que eu apresento em seguida.
|
|
| Salve esta imagem (linha.gif 1x1) no diretório da sua home page ( ver download ). Como é uma gif transparente,
você poderá usá-la sobre qualquer pano de fundo. Com estes 43 bytes você vai fazer coisas incríveis. |
|
Se você não quiser se preocupar com cálculos de percentuais (%) poderá utilizar linha.gif para controlar a largura e a altura das células.
Usando width e height para controlar largura e altura, respectivamente
(linha.gif border=1 width=200 height=1) |
(linha.gif border=1 width=1 height=50) |
Utilizando as linha.gif no poema VideoGame. Já viu?
Outro exemplo: como você viu na diagramação do "VideoGame" é facil trabalhar com tabelas e o uso de linhas. E, agora, para que não haja a menor sombra de dúvida, vou mostrar como foi feito a cabeça, digamos, robótica do conversando HTML. Neste caso, usar tabelas com percentuais seria muito mais trabalhoso. Mas, com o uso da linha.gif e usando o atributo bgcolor no td das células, o desenho se tornou até divertido. Observe que os olhos e a boca estão preenchidos com uma animação gif e uma animação flash, respectivamente. Cabeça robótica.
Bem, o uso de linha.gif transparente tem vantagens e desvantagens. Ela nos dá precisão e rapidez no posicionamento dos elementos na página. Podemos aumentar ou diminuir as linhas, pixel por pixel, até chegar exatamente no ponto desejado. E ainda: elas são aceitas por todos os navegadores. A única ressalva é que na geração 3.0 dos browser ( eu testei no Netscape Gold 3.0) as linhas aparecem rapidamente durante o carregamento inicial da página. Ao usá-las, não esqueça, é claro, de colocar border=0.
Obs: as linhas não aparecem mais nos navegadores atuais: IExplorer, Chrome, Firefox, Safari, etc.
Engenharia reversa
Ver como uma página foi escrita é a melhor maneira de aprender HTML, JavaScript, recursos novos, e, principalmente, a diagramar com tabelas. É o que alguns autores chamam de engenharia reversa.
Abra a página no seu navegador. No menu View do Netscape escolha Source. No menu Exibir do Explorer escolha código fonte. Você pode salvar o documento para estudo e análise posterior.
Mais alguns exemplos (templates) que usam tabelas e backgrounds de forma criativa: -- -- .
| Tabelas |