Aula 4

Data de publicação: Nov 30, 2012 11:54:14 AM

2. UTILIZAÇÃO E FORMATAÇÃO DE TABELAS

Quando pretendemos arrumar a "tralha" que temos em casa o que fazemos? Bem, ou optamos por colocar na garagem ou arrecadação, onde tudo ficará empilhado e desarrumado, ou colocamos num armário com prateleiras.

As tabelas em HTML não são mais que um "armário de prateleiras" onde colocamos a informação gráfica para que fique "arrumadinha". Sem tabelas tudo ficaria "empilhado" e sem formatação.

As tabelas são muitas vezes (quase sempre) a base de uma página Web, a sua estrutura.

A tag que a representa é <table> e tem de ser obrigatoriamente fechada.

As sub-tags que podem ser utilizadas dentro desta tag são as seguintes:

<tr> sub-tag inserida dentro da tabela representando uma linha

<th> sub-tag inserida dentro da tabela representando o cabeçalho de uma coluna

<td> sub-tag inserida dentro da tabela representando os dados de uma coluna (representa uma célula da tabela)

Os atributos suportados por estas tags encontram-se de seguida:

bordercolor - alterar a cor da borda da tabela;

bgcolor - alterar a cor de fundo de uma célula ou de toda a tabela

background - inserir uma imagem de fundo numa célula ou em toda a tabela

align - alinhar horizontalmente o conteúdo de uma célula ou alinhar toda a tabela

valign - alinhar verticalmente o conteúdo de uma célula

width - alterar a largura de uma célula ou de toda a tabela

height - alterar a altura de uma célula ou de toda a tabela

rowspan - juntar duas ou mais linhas numa só célula

colspan - juntar duas ou mais colunas numa só célula

Exemplo 1:

(...)

<body>

<tr> <th> Cabeçalho 1 <th> Cabeçalho 2

<tr> <td> Célula 1 <td> Célula 2

</table>

</body>

(...)

Resultado:

A tabela anterior é muito simples, constituída por duas linhas (<tr>), um cabeçalho (<th>) e duas colunas (<td>).

Por vezes necessitamos de construir uma tabela um pouco mais complexa que a anterior. Quando usamos um editor de HTML, construir uma tabela torna-se mais fácil, uma vez que podemos usar a opção unir (merge) células. Mas como fazer isso em programação? No exemplo seguinte aborda-se um caso destes.

Exemplo 2:

(...)

<body>

<tr height="100"> <td colspan="2" align="right" bgcolor="yellow"> 1

<tr> <td rowspan="2" valign="top" bgcolor="cyan"> 2 <td> 3

<tr bgcolor="green"> <td> 4

</table>

</body>

(...)

Resultado:

O truque para construir algo semelhante passa por olhar para a tabela e identificar o número total de linhas e colunas, no caso de nehuma delas se encontrar unida. Assim, através da figura facilmente se conclui que existem no total 2 colunas e 3 linhas.

A célula 1 ocupa as duas colunas mas apenas uma linha, logo foi necessário unir duas colunas, conseguindo através de colspan="2".

Por outro lado, a célula 2 ocupa duas linhas mas apenas uma coluna, tendo-se unido as duas linhas através de rowspan="2".

AULA 4 - EXERCÍCIO 1

No GEDIT/NotePad, crie uma página com uma tabela, 5 colunas por 4 linhas.

Título das colunas (cabeçalho da tabela) com a cor de fundo em azul: Nome; Nr BI; Data Nascimento; Turma; Ano Escolaridade.
Nas restantes 3 linhas preencha com dados de colegas da turma.

Grave a página como AULA4_1.html e abra-a no seu browser para verificar o resultado

O exemplo seguinte mostra como podemos utilizar tabelas para criar a estrutura base do nosso site.

Exemplo 3:

(...)

<body>

<tr height="100"> <td colspan="2"> Logotipo do Site

<tr> <td rowspan="2"> Menu <td width="350"> Submenu ou localização

<tr height="350"> <td> Informação

<tr> <td colspan="2"> <p align="right"> Rodapé: Assinatura, @Copyright, Contactos, Informações, etc. </p>

</table>

</body>

(...)

Resultado:

AULA 4 - EXERCÍCIO 2

Em GEDIT/notepad, crie a estrutura da sua página baseada em tabelas.

Grave a página como AULA4_2.html e abra-a no seu browser para verificar o resultado.