Exmplos tabelas html

Criar Tabelas em HTML

Pág. 1 de 3

Tabelas
Como ainda não existem formas mais sofisticadas de controlar o posicionamento de imagens e texto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da página de maneira mais criativa.

Uma tabela simples
As tabelas são compostas de linhas, dentro das quais são colocadas células com o conteúdo.
Dentro das células pode-se colocar texto, imagens ou até mesmo outras tabelas. Uma linha pode conter várias células, formando-se então uma tabela com várias colunas.
Os tags para construir uma tabela são: e : para indicar o início e o fim de uma tabela e : para indicar o início e o fim de uma linha e : para indicar o início e o fim de uma célula-título e : para indicar o início e o fim de uma célula
A única diferença entre o tag e é que o primeiro marca o texto da célula com ênfase. Os navegadores interpretam essa ênfase como negrito. Nos exemplos deste livro, não utilizamos o tag , já que a ênfase pode ser conseguida com tags como e .
Não é obrigatório colocar os tags de fim dos elementos da tabela (, e ), mas estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag
.

EXEMPLO 1

Célula 1Célula 2

Célula 3Célula 4

O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas. É possível expandir as células para que elas ocupem o espaço de mais de uma coluna ou linha.

EXEMPLO 2

Célula expandida

Célula 1Célula 2

Célula 3Célula 4

ou

EXEMPLO 3

Célula expandida
Célula 1Célula 2

Célula 3Célula 4

Criar Tabelas em HTML

Pág. 2 de 3

A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das