[Home] [HTML] [CSS] [Contacto]

HTML

Aula OT: 05/03/2024

Tabelas em HTML:

Ao construir uma página para apresentar uma listagem de dados, poderá recorrer a uma tabela, para que o resultado final da página contenha uma apresentação estruturada, fácil de ler e de entender. Por exemplo, mostrar dados oriundos de uma base de dados.
Uma tabela é uma representação de dados organizados em linhas e colunas, semelhante a uma folha de cálculo (EXCEL).

Em HTML, podemos utilizar tabelas para organizar dados tais como: i) imagens, ii) texto e iii) links, dispondo essa informação em linhas e colunas (células).

Principais elementos HTML para criar tabelas:

A tag mais importante é <table> que é o elemento utilizado para assinalar o início e fim da tabela.

Lista das tags importantes:

Exemplo de tabela (simples) 2x2:

Para criar a seguinte tabela, com duas linhas e duas colunas (2x2), onde se lista o nome e o apelido de pessoas:

HTML:

<table>

  <tr>

    <td>Rui</td>

    <td>Lima</td>

  </tr>

  <tr>

    <td>Élio</td>

    <td>Costa</td>

  </tr>

</table>

Ajuda: HTML ENCODE

Adicionar nome das colunas (cabeçalho):

Para criar a seguinte tabela, com duas linhas e duas colunas (2x2), onde se lista o nome e o apelido de pessoas:

Adicionar uma legenda

Por omissão, a legenda da tabela aparece no topo!

Adicionar bordo à tabela:

Definir a seguinte propriedade: style="border:1px solid black", onde ?

Controlar a dimensão da tabela:

Pretende-se que a tabela se ajute á dimenssão máxima da largura da página, mas que a coluna do nome não ultrapasse 30% da largura.

NOTA:

Mesmo para operações simples, a formação das tabelas fica complicada, daí a necessidade de utilizar CSS.

Trabalho Casa:

Recorrer a tabelas para organizar a informação da página de contacto.

[Topo]