Html

Disponível somente no TrabalhosFeitos
  • Páginas : 5 (1208 palavras )
  • Download(s) : 0
  • Publicado : 5 de abril de 2013
Ler documento completo
Amostra do texto
Tabelas
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada.Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.
A formatação de tabelas faz parte da versão 3.0 da linguagem HTML.Manipular tabelas em HTML dá trabalho e necessita de calma.
A tag para criação de uma tabela é , e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com .
Atributos de Tabela
BORDER: O elemento delimita uma tabela e a espessura de sua borda:
Listagem 1: Sintaxe de uso do atributo border
1 ...
WIDTH e HEIGHT: com essesatributos, você pode definir o tamanho que a tabela vai ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem. Basicamente o HEIGHT não é usado , mas o valor de largura é muito útil. Veja como usar:
Listagem 2: Sintaxe de uso dos atributos width e height
1
Segue um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"):
Linha 1, Coluna1 Linha 1, Coluna 2
Linha 2, Coluna 1 Linha 3, Coluna 2
Dentro dessa formatação, inserimos as linhas e elementos da tabela:
...: define um cabeçalho para a tabela
>.. : delimita uma linha
...: delimita uma coluna da tabela
Veja como fica o código para a criação de uma tabela com 2 linhas e 2 colunas:
Listagem 3: Código de uma tabela 2x2
1
2
3
4
5
6
7
8
9
10

Linha1, Coluna1
Linha 1, Coluna 2


Linha 2, Coluna 1
Linha 2, Coluna 2


Agora veja a mesma tabela sem bordas (border=0):
Atributos COLSPAN e ROWSPAN
É possível mesclar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
Listagem 4: Exemplo de uso do colspan e rowspan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
colunas 1 e 2linha1, coluna 1
linha 1, coluna 2


linha 2, coluna 1
linha 2, coluna 2

3 linhas juntas

duas linhas


duas linhas


três linhas


Resultado: colunas 1 e 2 3 linhas juntas
colunas 1 e 2 3 linhas juntas
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2
duas linhas
duas linhas
três linhas
Neste exemplo, temos que o cabecalho Colunas 1 e 2compreende duas colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3).
Cores de fundo
Quando você cria uma tabela, ela tem um background transparente e, portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da página. Mas é possível que você defina uma cor de fundo para cada célula, linha e coluna da sua tabela. Para isso você deve incluir o atributo"BGCOLOR", veja como fica:
Listagem 5: Exemplo de uso do bgcolor
1
2
3
4
5
6
7
8
9
10
11
12
Coluna 1
Coluna 2

linha1, coluna 1
linha 1, coluna 2


linha 2, coluna 1
linha 2, coluna 2


Resultado:
Você pode definir a cor de fundo de qualquer linha ou coluna que quiser, bastando apenas incluir o atributo junto da tag de linha ou coluna. Da mesma forma você pode incluir tagsde fonte e imagem para colocar dentro de cada célula da tabela.
Imagem de fundo
Você também pode colocar em uma tabela uma imagem de fundo, como um papel de parede somente para a tabela. Para isso, você só precisa colocar o atributo "BACKGROUND". Veja como fazer:
Listagem 6: Exemplo de uso do background
1
2
3
4
5
6
7
8
9
10
11
12
Coluna 1
Coluna 2

linha1, coluna 1
linha...
tracking img