AminhaPágina

Estrutura de uma página usando tabelas.

Na criação de páginas em HTML, as tabelas servem para muito mais que a criação de tabelas propriamente ditas, é rara a página bem construída que não utilize tabelas para controlar melhor todo o conteúdo.

Vamos seguir paço a paço a criação de uma página com tabelas.

<html>
<head>
<title>Página com tabela simples</title>
</head>
<body>
<table align="center" border="2">
<tr>

Isto parece óbvio.

O ‘tag’ <table> inicia a tabela.
Align, define a localização da tabela na página (neste caso fica centrada).
border, define a largura da borda.
<tr> significa Table Row, e indica que vamos introduzir uma linha na tabela.

As tabelas definem-se por linhas e colunas.

<td align="center">uma célula</td>
<td align="center">duas células</td>

Podia dizer-se que <td> corresponde à divisão em colunas, duas neste caso, mas isto é pouco exato visto que, como vamos ver mais à frente, um <td> não corresponde necessariamente a uma coluna.
Este ‘tag’ apenas divide a linha atual em várias células.
Se quisermos apenas uma célula, temos que utilizar na mesma um <td>.
Outra coisa, o parâmetro align deste ‘tag’ é responsável pelo alinhamento por defeito do texto contido na célula.

</tr>
</table>
</body>
</html>

Fechamos todos os ‘tags’ abertos e temos a nossa tabela concluída.

Vamos agora ver mais alguns exemplos de como utilizar tabelas.

Primeiro vamos ver como utilizar uma tabela para fazer uma página com uma imagem no centro do ecrã.

<html>
<head>
<title>Seja bem vindo a minha página</title>
</head>
<body bgcolor="#000000" text="#ffffff">
<table align="center" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<a href="pagina1.html">
<img src="rafael.jpg" alt="clique para entrar"></a>
</td></tr>
</table>
</body>
</html>

Como vimos, é obrigatório respeitar sempre a hierarquia <table><tr><td>.
O facto desta tabela ter apenas uma célula não dispensa nenhum destes ‘tags’.
Começando por <table>, width e height define o tamanho da tabela.
Neste caso foi fornecido um valor em percentagem, relativo ao tamanho do ecrã. Assim a tabela ocupa 100% do ecrã.
Se estivesse escrito <table width="100">, o valor era interpretado em pixels, e o resultado da tabela era bem diferente.
Cabe a cada um avaliar em que situação deve utilizar percentagens ou valores em pixels.
Em <td>, surge align e valign.
align é um parâmetro utilizado em muitos ‘tags’, diz respeito ao alinhamento horizontal (pode conter "center", "left" ou "right").
valign é um parâmetro que surge apenas no ‘tag’ <td>, diz respeito ao alinhamento vertical, (pode conter os valores "middle" (centro), "top" (em cima) ou "bottom", (em baixo).

Vamos ver uma tabela complexa:

<body bgcolor="#000000" text="#ffffff">
<table bgcolor="#000099" align="center" width="400" height="300" border="3">
<tr>
<td align="center" colspan="3"> 1 </td>
</tr>
<tr>
<td align="center" rowspan="2"> 2 </td>
<td align="center" rowspan="2"> 3 </td>
<td align="center"> 4 </td>
</tr>
<tr>
<td align="center"> 5 </td>
</tr></table></body>

Não devemos associar os ‘tags’ <tr> e <td> com linhas e colunas. Embora exista alguma verdade nessa associação.
Podemos ter apenas um <td> para várias colunas, e um <tr> para várias linhas, como se pode ver no resultado.

Vamos analisar o HTML que inserimos.

Começamos por usar um parâmetro novo em <table>.
Bgcolor, define a cor de fundo da tabela, tal como fizemos para o corpo da página.
Este parâmetro também pode ser utilizado em <tr> e em <td> para definir a cor de fundo de uma linha ou de uma célula.
Depois temos <td colspan="3">. Este parâmetro define o número de colunas que uma determinada célula ‘percorre’.
Assim, como acontece na tabela que criamos, se tivermos uma célula com três células por baixo, temos que percorrer três colunas.
No entanto, temos sempre que considerar como número de colunas na tabela o maior número 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 tem também rowspan, que se aplica as linhas.
Vemos este parâmetro 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.

<table></table>, define uma tabela.
<tr></tr>, define as linhas de uma tabela da esquerda para a direita.
<td></td>, define as células dentro de uma tabela.
<td align="?">, define o alinhamento horizontal do conteúdo de uma célula, á esquerda (left), centro (center) ou direita (right).
<td valign="?">, define o alinhamento vertical do conteúdo de uma célula, acima (top), centro (middle) ou abaixo (bottom).
<td bgcolor="cor hexadecimal">, define a cor da célula.
<td bordercolor="cor hexadecimal">, define a cor da borda.
<td bordercolorlight="cor hexadecimal">, define a cor da sombra mais clara da borda.
<td bordercolordark="cor hexadecimal">, define a cor da sombra mais escura da borda.
<td background="ficheiro">, define um fundo para a célula.
<td width="?"/height="?">, define a largura/altura da célula em pixels ou percentagem.
<td colspan="1">, expande uma célula a direita horizontalmente.
<td rowspan="1">, expande uma célula abaixo verticalmente.
<td cellspacing="?">, define o espaço entre as células.
<td cellpadding="?">, define o espaço entre as bordas da célula e o texto.

Para melhorar a estrutura de uma tabela (não confundir com o uso de uma tabela na estruturação de uma página web, embora seja possível não é esse o fundamento das etiquetas abaixo).

Para além de tudo o que falamos sobre elementos de uma tabela podemos ainda acrescentar mais alguns atributos que podem ajudar a estruturar melhor uma tabela.

<th></th>, define o cabeçalho dentro de uma célula, é idêntica á tag <td> com a diferença que exibe o seu conteúdo em negrito.
<table summary="descrição da tabela">, informações adicionais sobre o propósito e estrutura da tabela. Não fica visível na página.
<caption></caption>, esta etiqueta é responsável pela colocação de uma legenda na tabela que por defeito vai ser visualizada acima da tabela ao centro. Só pode existir uma etiqueta por tabela.

Para controlar o alinhamento da legenda podemos usar o parâmetro align="?" onde podemos usar, como devem imaginar, os atributos:

Top, legenda alinhada acima da tabela e ao centro.
Bottom, legenda alinhada abaixo da tabela e ao centro.
Left, legenda alinhada a esquerda (neste caso a tabela será empurrada para a direita).
Right, legenda alinhada a direita (neste caso a tabela será empurrada para a esquerda).

<table border rules="?">, esta etiqueta tem a função de escolher as linhas internas que são mostradas dentro da tabela.
Os valores deste atributo podem ser:

None, nenhuma linha interna será mostrada.
Rows, apenas são mostradas as linhas horizontais entre cada linha da tabela.
Cols, apenas são visíveis as linhas verticais entre cada coluna da tabela.
All, mostra todas as linhas.
Groups, para linhas entre grupos de colunas e seções horizontal, definidas por etiquetas especiais como colgroup e thead.

<thead></thead>, é dentro desta etiqueta que deve ser composto o cabeçalho. Esta tag deve vir antes do corpo de dados da tabela e deve conter pelo menos uma tag <tr> e uma <td> ou <th>.
<tfoot></tfoot>, aqui deve ser composto o rodapé da tabela e como a tag <thead> também deve vir antes do corpo de dados da tabela logo a seguir a <thead> e deve conter pelo menos uma tag <tr> e uma tag <td> ou <th>.
<tbody></tbody>, Define o corpo de dados de uma tabela. Uma tabela pode conter mais de um <tbody>. Este tag é obrigatório sempre que usamos <thead> ou <tfoot>.
nowrap, nos tags <th> ou <td> impede a quebra do texto.

Exemplo de uma tabela com estes atributos:

<body>
<table width="100%" border="1">
<thead>
<tr>
<th>Matricula</th><th>condutor</th><th>idade</th><th>voltas</th>
</tr>
</thead>
<tfoot>
<tr><td align="right" colspan="4">00/00/0000</td></tr>
</tfoot>
<tbody>
<tr><td>00-UU-00</td><td>Ana</td><td>20</td><td>4</td></tr>
</tbody>
</table>
</body>

<colgroup>, especifica um grupo de uma ou mais colunas de uma tabela para a formatação.
É útil para aplicação de estilos de colunas inteiras, em vez de repetir os estilos para cada célula ou para cada linha.
Deve ser um filho de um elemento <table>, após quaisquer elementos <caption> e antes de qualquer <thead>, <tbody>, <tfoot> e <tr>.
Para definir propriedades diferentes para uma coluna dentro de um <colgroup>, use o <col> dentro da tag <colgroup>.
Existem alguns atributos para <colgroup>, mas neste momento só span=”número de colunas a percorrer”, width=”valor em pixels ou percentagem”, valign=”top, middle, bottom ou baseline”, é suportado por todos os browsers.
<col>, É um atributo de extensão que define o número de colunas a espalhar a formatação.
Específica propriedades de coluna para cada coluna dentro de um <colgroup>, é útil para aplicação de estilos de colunas inteiras em vez de repetir os estilos para cada célula ou para cada linha.

Exemplo:

<table>
<colgroup>
<col span="numero de colunas a percorrer" style="background-color:codigo hexadecimal da cor">
<col style="background-color: codigo hexadecimal da cor ">
</colgroup>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
</tr>
<tr>
<td>ex1</td>>
<td>ex2</td>
<td>ex3</td>
</tr>
</table>

0|1|2|3|4|5|6|7|8|9|10|11|12|13|14