HTML Tutorial

Alinhamento
Formatação
Títulos
Linhas
Listas
Imagens
Mapas Clicáveis
Formulários
Frames
T A B E L A S

Uma tabela constitui-se da tag: <table> (tabela), cujos dados dever�o estar contidos nas tags <tr> (table row, linha) e <td> (table data, c�lula de dados) ou <th> (table heading/header, c�lula de cabe�alho). A tag <caption> (legenda, cabe�alho, t�tulo) � opcional.
    Exemplo de tabela simples com t�tulo, 3 linhas e 3 colunas, sendo que a 1a. linha e a 1a. coluna cont�m cabe�alhos:
T�tulo da Tabela
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2

  • Uso da tag <table>

Atributos: width, height, cellspacing, cellpadding, bgcolor, border, bordercolor, bordercolorlight e bordercolordark:
    O atributo width refere-se � largura da tabela. Exemplo com width="200"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo height refere-se � altura da tabela. Exemplo com height="200"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo cellspacing refere-se ao espa�amento entre as c�lulas da tabela. Exemplo com cellspacing="9"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo cellpadding refere-se ao espa�amento entre o texto e a borda da c�lula. Exemplo com cellpadding="9"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo bgcolor refere-se � cor da tabela. Exemplo com bgcolor="green"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo opcional border refere-se � espessura da borda e seu valor default = 0 (borda n�o existente). Exemplo de tabela com border = "1"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo bordercolor refere-se � cor da borda. Exemplo com bordercolor="yellow"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo bordercolorlight refere-se � cor da borda clara (superior e esquerda) da tabela. Exemplo com bordercolorlight="cyan"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
    O atributo bordercolordark refere-se � cor da borda escura (inferior e direita) da tabela. Exemplo com bordercolordark="red"
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2

  • Uso da tag <caption>

    O atributo align refere-se � posi��o do t�tulo em rela��o � tabela e pode ter os valores "top" ou "bottom":
T�tulo da Tabela
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
  Coluna 1 Coluna 2
Linha 1 C�lula Lin1-Col1 C�lula Lin1-Col2
Linha 2 C�lula Lin2-Col1 C�lula Lin2-Col2
T�tulo da Tabela

  • Uso das tags <td> e <td>

Atributos: align, valign, width, height, colspan, rowspan, nowrap e bgcolor.  
    O atributo align refere-se ao alinhamento horizontal do texto dentro da c�lula, com rela��o a suas bordas. Pode ter 3 valores: left (default para <td>), center (default para <th>) e right.
esquerda centro direita
esquerda centro direita
    O atributo valign refere-se ao alinhamento vertical do texto dentro da c�lula, com rela��o a suas bordas. Pode ter 3 valores: top, middle (default) e bottom.
top middle bottom top middle bottom
    O atributo width
256 texto
texto 128
    O atributo height
128 texto
texto 64
    O atributo colspan define quantas colunas de tamanho normal uma c�lula pode abranger. Exemplo com colspan=2:
1 lin-2 col
texto texto
    O atributo rowspan define quantas linhas de tamanho normal uma c�lula pode abranger. Exemplo com rowspan=2:
1 col-2 lin texto
texto
    O atributo nowrap impede quebras de linha dentro das c�lulas.
textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto texto
texto texto
    O atributo bgcolor
c�d. HEXA COR c�d. HEXA COR c�d. HEXA COR c�d. HEXA COR c�d. HEXA COR c�d. HEXA COR c�d. HEXA COR
FFFFFF   FF0000   FFFF00   00FF00   00FFFF   0000FF   FF00FF  
F0F0F0   F00000   F0F000   00F000   00F0F0   0000F0   F000F0  
D0D0D0   D00000   D0D000   00D000   00D0D0   0000D0   D000D0  
B0B0B0   B00000   B0B000   00B000   00B0B0   0000B0   B000B0  
909090   900000   909000   009000   009090   000090   900090  
000000   010000   020200   000300   000404   000005   060006  

Hosted by www.Geocities.ws

1