AG8 Informtica

61

TABELASAs tabelas so muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possveis com simples comandos.A funcionalidade de uma tabela faz com que um determinado site tenha um aspectomais profissional e o usurio possa navegar de forma mais eficiente, pois os objetospodem estar melhor posicionados na home-page.

Vamos discutir, nesta parte, quais so os comandos para se criar uma tabela e mostraralguns exemplos. Claro que voc dever praticar e principalmente planejar a suatabela, pois sem isso, fica muito difcil de controlar o cdigo HTML da sua home-page.O comando para se inserir uma tabela ; para iniciar uma linha devemosintroduzir a tag e para uma clula (alguns preferem dizer coluna) . Todosestes comandos so encerrados como , e respectivamente.Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de3 colunas por 2 linhas, o cdigo HTML para isso :

Criando Tabelas

TABELA

PRIMEIRA COLUNA SEGUNDA COLUNA TERCEIRA COLUNA PRIMEIRA COLUNASEGUNDA COLUNA TERCEIRA COLUNA

AG8 Informtica

62

Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver comoficou.

Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo parase conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata docontedo 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 alargura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentroda clula etc.Vamos procurar trabalhar com vrios exemplos para visualizarmos melhor o uso destesparmetros.

1-ALTERANDO A LARGURA DA CLULAPara alterar o largura de uma clula da tabela basta acrescentar o parmetro WIDTHdentro da tag . Exemplo1:

WIDTH=100WIDTH=200 (PIXELS)

O parmetro WIDTH pode receber dois tipos de valores, em pixels como no exemploacima ou em porcentagem, como mostrado no exemplo a seguir. Tambm dentro datag vemos um outro parmetro que VALIGN=MIDDLE, este parmetro tem porfuno alinhar o contedo da clula no meio da mesma, ou seja, dentro da clula asfrases so alinhadas com relao ao seu centro.Exemplo2:

WIDTH=25%WIDTH=75%

AG8 Informtica

63

2- INSERINDO COR DE FUNDO E SEPARAO DE CLULASOutro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se tornaparticularmente til quando se quer dar destaque a uma clula em especial.Vejamos um exemplo:

VERMELHO AZUL VEMELHO

AZULVEMELHO AZUL

Aqui, vimos que podemos acrescentar cores ao fundo de uma clula, outra coisa quetambm pode ser feita mudar a fonte com os comandos de formatao que voc jconhece, como , por exemplo.

Repare que no exemplo anterior ns colocamos BORDER=0 e as clulas apareceramcoloridas, mas com um certo espaamento entre elas, para tirarmos este espaodevemos acrescentar dentro da tag o parmetro CELLSPACING=0. Esteparmetro elimina por completo os espaos entre as clulas.

VERMELHO AZUL VEMELHO

AZULVEMELHO AZUL

AG8 Informtica

64

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 tiverum elemento (frase, texto, figura etc.) dentro da clula voc pode acrescentar espaospor 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 usareste atributo para ver como ele funciona.

Isto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dosalinhamentos que encontramos na Internet so feito por intermdio de tabelas.Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar ouso de tabelas.

3-UM POUCO MAIS DE TABELASAgora que voc j est um pouco mais familiarizado com o uso de tabelas e com seusprincipais atributos, vamos ver como podemos aperfeioar o uso de tabelas.Em seguida descreveremos uma srie de outros atributos e comandos para tabelas: ... Esta tag insere um cabealho dentro da clula. Na verdade a nica diferena entre atag e a tag que a exibe o contedo da clula em negrito. ... Exibe um texto centralizado em relao tabela, como se fosse uma legenda.Exemplo:

LEGENDA

Contedo em negrito

Contedo em negrito

AG8 Informtica

65

Repare neste exemplo, que a legenda j sai centralizada com relao a tabela e repareno espao dentro da clula devido ao comando CELLPADDING.

4-OS ATRIBUTOS COLSPAN E ROWSPANEstes atributos so muito importantes dentro da tag . So eles que nospossibilitam remodelar a disposio das clulas dentro da tabela. Vejamos um exemploprtico:

Exemplo do uso do COLSPAN

CLULA 1 CLULA 2

Neste exemplo vemos que na tag foi introduzido o parmetro COLSPAN. Esteparmetro tem a finalidade de dizer que sob a clula onde ele foi introduzido podemoster um certo nmero de colunas. Logo, se voc quiser que uma clula ocupe uma nicalinha, como no nosso exemplo, voc deve inserir o parmetro dentro da tag destaclula. A quantidade de clulas que viro em baixo da clula que recebeu o atributoCOLSPAN deve ser de acordo com o nmero especificado no parmetro.Mas se quisermos definir uma nica clula ocupando uma coluna inteira ? Neste casousamos o atributo ROWSPAN. Exemplo:

Exemplo do uso do ROWSPANCLULA 1 CLULA 2

Para melhor utilizar estes parmetros e ver como eles funcionam voc deve fazer a suaprpria tabela, pois somente desta forma voc conseguir fixar o uso destesparmetros.

AG8 Informtica

66

5-USANDO TABELAS COMO MOLDURASUm 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:

Claro que voc deve usar com muito bom senso este artifcio da tag , poisnem sempre uma moldura em uma figura defini um bom layout (aparncia) da suahome-page.

6-COLOCANDO UMA IMAGEM DE FUNDO NAS TABELASUm recurso parecido com a cor de fundo , colocar uma imagem como fundo de umatabela uma tcnica muito usada. Atravs do complemento BACKGROUND dentro datag TABLE , basta indicar qual o endereo e o nome da figura.

Que tal um mergulho agora ?

7- O atributo RULESPara escolher as linhas internas que sero mostradas dentro da tabela , usamos oatributo RULES , dentro da tag . Os complementos desse atributo so :

none : nenhuma linha interna ; rows : para as linhas horizontais entre cada linha da tabela ; cols : para as linhas verticais entre cada coluna da tabela ; groups : para linhas entre grupos de colunas e sees horizontais , definidas portags especiais como COLGROUP e THEAD ; all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) .

AG8 Informtica

67

Veja uma tabela com todas as linhas internas ( default ) :

Outro exemplo sem as linhas internas :

Outro exemplo usando o complemento ROWS:

O ltimo exemplo usar o complemento COLS :

As tabelas so um forte recurso de modelagem das home-pages hoje em dia e paraque voc consiga utilizar bem este recuso no deve se limitar somente aos exemplosdesta apostila, procure em sites e at mesmos em livros , como por exemplo: "Criandosites arrasadores na Web" (captulo 4) ou "HTML Truques Espertos" (captulo 5).Nessas referncias voc poder encontrar vrios outros exemplos de pginas usandotabelas 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 parafalarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos :Internet Explore 4.0 e no Netscape Communicator 4.0. Voc no reparou nenhumadiferena no uso destes navegadores para nossos exemplos, a questo que paratabelas mais complexas, com alinhamentos mais precisos cada navegador interpretaestes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico uso deCELLSPACING e CELLPADDING.

Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordoquanto a padronizao de seus navegadores. Sendo assim, quando voc construirtabelas deve sempre levar em conta em qual navegador voc dar preferncia pararodar a sua pgina. Por isso nunca demais deixar claro sua home-page em qualnavegador ela roda melhor a sua formatao.