LWI_AlPhA: Um pouco sobre Tabelas em HTML

quarta-feira, 5 de outubro de 2011

Um pouco sobre Tabelas em HTML

As tabelas em HTML tem como função a apresentação de dados. Porém existem aqueles que utilizam as tabelas para elaborar o layout da página web. Conforme eram utilizadas antigamente, porém nas especificações do HTML existe aas tabelas para layout, mas que acaba não obtendo um resultado bom.

Existem vantagens da não utilização das tabelas para criar layout, dentre estes vale destacar: A manutenção facilitada, marcação limpa que facilita o mecanismo de busca,a facilidade para deficientes interpretar os códigos, o layout fica em arquivo central (CSS) separado, menor código e consequentemente o tempo para acesso é reduzido.

A seguir serão demonstrado alguns exemplos de criação de tabelas em HTML.

As tabelas são definidas pela Tag <table> e para as linhas são utilizadas <tr> e celulas <td>. Dentro das Tags podem existir atributos que definem o tamanho da celula, cor, tipo de borda, tamanho da fonte, entre outros.

1. Criando tabela em HTML exemplo:

2. Tabela com diferentes tipos de bordas:

3. Outro exemplo com bordas diferentes:

4. Tabela com cabeçalho:

5. Tabela com uma celula vazia:

6. Em alguns Browsers podem não aparecer a célula vazia, para evitar isso é necessário acrescentar o “ ” para ficar com as bordas visiveis:

7. Tabela sem borda:

8. Tabela com borda grossa e título:

9. Tabelas com celulas maiores que o normal:

10. Elementos dentro de outros:

11. Espaçamento na celula(Cellpadding):

12. Espaçamento entre celulas(Cellspacing) :

13. Adicionando cor e imagem de fundo da tabela:

OBS.: Para a imagem aparecer, é necessário que esteja na mesma pasta que está o código HTML.

14. Adicionando Cor/Imagem ao fundo de uma celula:

15. Alinhando o conteúdo de uma Celula:

16. Atributo Frame: controlando as bordas.

Fonte: Apostila de HTML

Video sobre Tabelas em HTML

A seguir são apresentados alguns exemplos de atributos de uma Tag utilizado no video:

Border = Largura da borda

Cellpadding="10": espaço entre o conteudo e a borda

cellspacing="1" : indica o espaço entre as celulas.

align="right" (Direita)

align="left" (Esquerda)

align="center" (Centralizado)

align="justify" (Justificado)

Style="background-color:#CCCCCC;" ( Fundo da celula com a cor cinza)

Exemplo de Tabela do Video:

Já neste segundo video são apresentados os atributos Rowspan e Colspan. Quando adicionado o atributo rowspan a celula se expande verticalmente. E para o colspan expande horizontalmente.