Truques e Dicas - Tutoriais de HTML - Estrutura usando tabelas

tutoriais

Photoshop

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE HTML

6. Estrutura usando tabelas (continuação)

Página:

Como vimos, é obrigatório respeitar sempre a hierarquia <TABLE><TR><TD> e o facto de esta tabela ter apenas uma célula não dispensa nenhum destes ‘tags’.

Começando por <TABLE>, WIDTH e HEIGHT definem o tamanho da tabela. Neste caso foi fornecido um valor em percentagem, relativo ao tamanho do ecrã. Assim conseguimos criar uma tabela que ocupa a totalidade do ecrã. Caso estivesse escrito <TABLE WIDTH="100">, o valor seria interpretado em termos absolutos, em pixeis, e tendo em conta que a maioria das pessoas têm o seu ecrã com 800 pixeis de largura, o resultado da tabela seria bem diferente. Cabe a cada um julgar as situações em que devem ser utilizadas percentagens ou valores em pixeis

Em <TD>, surgem ALIGN e VALIGN. Se o primeiro é um parâmetro que surge em muitos ‘tags’ e diz respeito ao alinhamento horizontal (pode conter "CENTER", "LEFT" ou "RIGHT"), VALIGN é um parâmetro que nos surge apenas no ‘tag’ <TD>, e diz respeito ao alinhamento vertical. Pode por isso conter os valores "MIDDLE", "TOP" ou "BOTTOM", respectivamente para o centro, em cima ou em baixo.

Finalmente, vamos analisar uma tabela complexa:

<TR><TD ALIGN="CENTER"> 5 </TD></TR>

</TABLE>
</BODY>

Para melhor compreender esta estrutura é conveniente vermos o resultado final:

É por isto que não se pode associar os ‘tags’ <TR> e <TD> com linhas e colunas. Se bem que exista alguma verdade nessa associação, podemos, de facto, ter apenas um <TD> para várias colunas, e um <TR> para várias linhas, como se pode ver no resultado. Analisemos então o HTML que inserimos.

Começamos por introduzir um novo parâmetro em <TABLE>. Através de BGCOLOR conseguimos definir, tal como fizemos para a o corpo da página, a cor de fundo da tabela. Este parâmetro também pode ser utilizado em <TR> e em <TD> para definir a cor de fundo de uma determinada linha ou célula.

Depois introduzimos <TD COLSPAN="3">. Este parâmetro define o número de colunas que uma determinada célula ‘percorre’. Assim, como acontece na nossa tabela, se tivermos uma única célula com três células por baixo, teremos que percorrer três colunas. No entanto, teremos sempre que considerar como número de colunas na nossa tabela o maior numero possível, por exemplo, se a célula 5 estivesse dividida em duas colunas, o parâmetro COLSPAN da célula 1 teria que ter um valor igual a 4.

Semelhante temos também ROWSPAN, que se aplica a linhas. Vemos este parâmetro aplicado nas células 2 e 3, o que faz com que o <TR> seguinte a ser aberto vá ocupar o espaço que ficou debaixo da célula 4.

Seguinte

ANÚNCIOS