Tabelas

Permite organizar as informações de maneira padronizada. Pode ser inseridos textos, imagens, links e até tabelas, e ainda incluir bordas e definir mais de uma coluna.

Uma tabela é formada por um conjunto de linhas e colunas, e o encontro de uma linha e coluna é denominado célula.

<TABLE>...</TABLE> - delimitam o início e fim da tabela. Possui os seguintes parêmetros:

· BORDER = define as linhas e bordas da tabela. Exemplo: <TABLE BORDER> -cria borda padrão
ou <TABLE BORDER=n> - altera a espessura da borda.

· BORDERCOLOR = permite alterar a cor das bordas.

· ALIGN = determina o alinhamento da tabela. Seus valores são: LEFT (default), RIGHT E CENTER.

· WIDTH = define a largura da tabela em relação à largura da tela; seus valores podem ser expressos em pixels ou em porcentagem de tela.

· HEIGHT = define a altura da tabela; seus valores podem ser expressos em pixels ou em porcentagem de tela.

· BGCOLOR = determina a cor de fundo para a tabela.

· BACKGROUND = aceita uma imagem como fundo da tabela.

· CELLSPACING = cria o espaço entre as células; seu valor é expresso em pixels.

· CELLPADDING = cria as imagens dentro das células entre a borda e seu conteúdo.

· FRAME = indica quais lados da borda da tabela serão visíveis. Manterá as linhas horizontais e verticais internas da tabela. Deve ser usado em conjunto com o parâmetro BORDER. Seus principais valores são:

· VOID – não terá a borda externa da tabela.

· ABOVE – inclui a borda superior da tabela.

· BELOW – cria a borda inferior da tabela.

· LHS – gera a borda esquerda da tabela.

· RHS – gera a borda direita da tabela.

· HSIDES – determina as bordas horizontais (inferior e superior) da tabela.

· VSIDES - determina as bordas lateriais (esquerda e direita) da tabela.

· RULES = indica quais grupos de linhas internas estarão visíveis. Mantém as bordas externas da tabela. Seus principais valores são:

· NONE – exclui as linhas internas da tabela.

· ROWS – inclui as linhas horizontais da tabela.

· COLS – inclui as linhas verticais da tabela.

· ALL – cria todas as linhas internas da tabela.

OBS.: OS parâmetros FRAME e RULES não são reconhecidos pelo Netscape.

 

<CAPTION>...</CAPTION> - define um título ou legenda para a tabela. Cria a legenda acima da tabela e inclui uma linha em branco entre elas (default). Tem os seguintes parâmetros:

· ALIGN = alinha horizontalmente a legenda ou título. Aceita os valores: LEFT, RIGHT E CENTER (default).

· VALIGN = alinha verticalmente a legenda ou título. Aceita os valores: TOP (default) e BOTTOM.

<TR>...</TR> - inclui linha na tabela. Seus parâmetros são:

· BGCOLOR = determina a cor de fundo para a linha.

· BORDERCOLOR = permite alterar a cor de borda das células para toda a linha.

· ALIGN = alinha horizontalmente os dados das células de toda a linha. Aceita os valores: LEFT, RIGHT E CENTER.

· VALIGN = alinha verticalmente os dados das células de toda a linha. Aceita os valores: TOP, MIDDLE e BOTTOM.

<TH>...</TH> - define o conteúdo da célula como título

<TD>...</TD> - define o conteúdo da célula de dados de uma tabela.

· BGCOLOR = determina a cor de fundo da célula.

· BORDERCOLOR = permite alterar a cor de borda da célula.

· ALIGN = alinha horizontalmente os dados da célula. Aceita os valores: LEFT, RIGHT E CENTER.

· VALIGN = alinha verticalmente os dados da célula. Aceita os valores: TOP, MIDDLE e BOTTOM.

· WIDTH = define a largura da célula (todas as células da coluna são alteradas); seus valores podem ser expressos em pixels ou em porcentagem de tela.

· HEIGHT = define a altura da célula (todas as células da coluna são alteradas); seus valores podem ser expressos em pixels ou em porcentagem de tela.

· COLSPAN = permite que uma célula seja expandida podendo ocupar mais de uma coluna. Exemplo: <TD COLSPAN=n>

· ROWSPAN = permite que uma célula seja expandida podendo ocupar mais de uma linha. Exemplo: <TD ROWSPAN=n>

· NOWRAP = este parâmetro não permite quebra de linha dentro da célula.

OBS.: o Natscape não reconhece o parâmetro BORDERCOLOR para célula.

Exemplo:

 

Outros exemplos de tabelas:

Obs.: Para visualizar o código fonte do exemplo selecionado, clique com o botão direito do mouse sobre a tabela e selecione o comando Exibir Código Fonte.

Tabela 1
Tabela 2
Tabela 3
Tabela 4
Tabela 5
Tabela 6
Tabela 7
Tabela 8
Tabela 9
Tabela 10
Tabela 11
Tabela 12