AULA 11: Apresentação, formatação e cuidados

Depois de pensarmos bem o que iria ser a nossa página e já sabermos o básico para a fazer, vamos aprender novas técnicas e formas de a tornar mais organizada e agradável a quem a visita.

As tabelas

A algumas aulas atrás, aprendeu a fazer uma tabela simples. Como exemplo criámos uma lista de produtos com o seu preço correspondente à frente. Uma tabela pode ser um elemento importante e agradável numa página web, se esta estiver bem estruturada e legível.

Se não se lembra de como criar tabelas, consulte a Aula 8 deste curso.

A tabela poderá não ser uma estrutura firme, podemos transformá-la de diversas formas.
Na aula dada acerca das tabelas falamos no 'border' (borda). Este atributo indica a grossura das linhas estruturais da tabela e de separação entre células. A borda é importante para demarcar células e separar conteúdos, mas pode não ser necessária se optarmos por colorir o fundo da tabela e das suas células.

Uma tabela básica com duas colunas verticais e duas barras horizontais:

<table>
<tr>
<td>Célula superior esquerda</td>
<td>Célula superior direita</td>
</tr>
<tr>
<td>Célula inferior esquerda</td>
<td>Célula inferior direita</td>
</tr>
</table>


Acrescente agora o seguinte atributo ao tag <table>:

bgcolor="#00FF00"

Repare que toda a sua tabela ficou verde. Este atributo pode ser utilizado em qualquer parte da tabela, por exemplo, vamos pintar a Célula superior direita de amarelo. Transforme o <td> desta e insira o atributo de côr de fundo:

<td bgcolor="#FFFF00">

A sua tabela encontra-se agora verde, mas com uma das células amarelas. A côr das células sobrepõe-se sempre à côr da tabela que as suporta. Pode, claro está, não definir nenhuma côr de fundo para a tabela e apenas nas células. Assim a tabela terá a mesma côr da página e apenas as células terão uma nova côr.
Convém, caso queira colorir uma célula que não pretende preencher, inserir algo lá dentro que não seja visível. Isto poderá passar por uma letra da mesma côr do fundo pretendido, etc.

Imagens como fundo

Tal como as côres, também poderá optar por imagens para fazer um fundo para as suas tabelas e células. A imagem de fundo comporta-se da mesma maneira como a imagem de fundo que escolheu para a sua página. Tenha cuidado com as imagens que escolhe, imagens muito garridas ou complexas podem estragar completamente o efeito final da sua página. Mantenha as coisas o mais simples possível.

Exemplo de um tag <table> com imagem de fundo:

<table background="fundotabela.gif">

Ou, apenas uma célula com imagem de fundo:

<td background="fundotabela.gif">


Reparou decerto que não tendo uma borda definida, ou tendo uma borda de valor zero, as coisas que se encontram nas várias células ficam encostadas, o que pode incomodar na sua leitura. Existem duas formas de impedir que isto aconteça no tag <table>. Um dos atributos é o cellspacing, este atributo define o espaço entre células. Estas vão ficar afastadas umas das outras mesmo que o border da tabela seja invisivel. Para podermos observar melhor isto, vamos definir um border de 1:

<table border="1">

E então usamos assim: (acrescente)

cellspacing="5"

Dê o valor de zero à borda da sua tabela <table border="0">. Mantenha aquela côr verde e dê outra côr às duas células superiores. Repare que estão encostadas. Acrescente então o parâmetro cellspacing à tabela, dê-lhe o valor de 2. Repare que as células estão agora separadas por um espaço verde (a côr original da tabela)

'Mas eu não quero esse espaço no meio!'

Calma, tire então o cellspacing e insira este:

<table cellpadding="5">

Este parâmetro mantém as células coladas, mas afasta o seu conteúdo da margem. Neste caso o texto inserido dentro das células assumem um afastamento de 2 pixeis em relação à fronteira entre as células e borda da tabela.
Pode assim separar o conteúdo da sua tabela dependendo da célula onde se encontrar, sem ter que afastar células.

Dimensões:

Tanto as tabelas como as células podem ter larguras pré difinidas com o já conhecido width="" que usou para as imagens. Aqui, pode ir um pouco mais longe, já que, ao contrário das imagens, os tamanhos não necessitam de ser fixos em pixeis, mas podem ser também percentuais em relação ao tamanho da largura do browser e da resolução que o utilizador estiver a usar.

Assim, se quiser uma tabela com 600 pixeis de largura usará:

<table width="600">

Se quiser uma tabela que ocupe a totalidade da largura do browser independentemente da resolução e do tamanho deste usará:

<table width="100%">

Experimente fazer uma tabela com 100% de largura. Mexa na largura do seu browser (não o maximize nem minimize) repare que a tabela encolhe ou estica conforme o seu tamanho.

Também as células podem ter tamanhos definidos tanto percentualmente como fixamente. Mas atenção, se a tabela tem, por exemplo, 600 pix de largura, o total das larguras das células nela contida tem que dar 600. Se tiver duas colunas verticais, a soma destas não pode dar nem mais nem menos que 600. Note que apenas terá que definir a largura das células do topo, as de baixo adoptam automáticamente a largura destas.

Alinhamentos:

Quando quer que as coisas dentro de uma determinada célula estejam alinhadas para a esquerda, direita ou no centro, deve indicar isto no tag da célula que o pretende. No <td>, portanto.
isto é feito com o velho align="" e usa-se assim:

<td align="right"> ou <td align="center">

não será necessário usar o 'left' já que se não indicar nenhum alinhamento, este será automáticamente à esquerda.

Pode enganar e parecer que um <td align="right"> vai encostar a célula à direita, mas na verdade, apenas vai influenciar o que estiver dentro dela. Mas isto não se passa se usar este atributo no tag <table>. Se o fizer, este influencia a posição da tabela e não do seu conteúdo.

<table align="center"> vai colocar a sua tabela no centro da sua página.

Alinhamentos verticais:

Imagine que a sua célula da esquerda (qualquer uma) tem uma imagem ou um texto com dimensões granditas. A sua célula gémea da direita vai ter sempre a mesma altura, já que nas tabelas tudo se comporta como numa grelha fixa. Se essa célula tiver pouco conteúdo este vai ficar a 'nadar' lá dentro. Por defeito, o conteúdo vai ficar a nadar no centro da célula. Nem em cima nem em baixo. Pode contrariar esta tendência se conhecer um atributo, o td valign="" que significa vertical alignment.

Usamos assim:

<td valign="top">
se quisermos o conteúdo encostado ao topo, ou:

<td valign="bottom">
se quisermos o conteúdo encostado ao fundo da tabela.


Como sempre fazemos, aconselhamos vivamente a reler esta aula e a experimentar cada passo e cada atributo ensinado. Lembre-se que pode acumular atributos dentro de um tag, ou seja, pode indicar que uma tabela é ao mesmo tempo centrada, com fundo verde e com bordas nulas:

<table border="0" align="CENTER" bgcolor="#00FF00">

O mesmo se passa, claro está, nos tags das células, os <td>.

Não se esqueça ainda de que pode inserir outros tags de HTML, dentro das células de uma tabela, assim:

<td>
<b>Conteudo que pretende inserir nesta célula</b><br>
<img src="radio.gif" width="100" height="117" alt="Imagem" border="0">
</td>

Desafio:

Crie uma tabela com o tamanho que desejar, Essa tabela terá um cabeçalho (barra horizontal superior) preto com letras brancas e por baixo terá uma lista dos objectos que tem em cima da sua secretária. à esquerda insira o nome dos objectos e à direita descreva-os.
As células deverão estar afastadas umas das outras e a coluna com os nomes dos objectos deverá ter uma côr de fundo diferente da coluna com as descrições.
Três ou quatro objectos serão suficientes. Isto serve apenas para observar na prática aquilo que aprendeu aqui. Se já tiver uma conta num servidor de páginas, envie para lá o resultado e mostre aos seus colegas e amigos. Estamos todos ansiosos.