22) TABELAS

VoltarDescerAvançarÍndice
 
A tabela é um recurso de grande utilidade para a organização do texto e das imagens de uma HP. Afinal, dividindo-se a página em células, podemos determinar o posicionamento de seus elementos mais precisamente.
 
Para gerar uma tabela utilizamos o comando <TABLE>. Entre as etiquetas <TABLE> e </TABLE> aparecem os comandos que criam as linhas, as células e a legenda da tabela. Podemos inserir, dentro das células, textos, hipertextos, imagens, não inserir nada ou até mesmo, como veremos depois, inserir outra tabela. Afinal de contas, as tabelas suportam outros elementos HTML, inclusive os usados para a formatação de textos e parágrafos. Desta forma você pode inserir quebras de linha, parágrafos, títulos – headings – hiperlinks, etc.
 
As etiquetas <TR> e </TR> inserem uma nova linha. Entre elas devem estar as etiquetas <TD> e </TD> que inserem uma nova célula.
 
Dica: Para facilitar a memorização da etiqueta <TR> utilizada para inserir na tabela uma nova linha, fazendo-se uma analogia com o comando <BR>, lembre-se que ela insere uma quebra de linha na tabela!
 
A legenda da tabela pode ser inserida através das etiquetas repositórias <CAPTION> e </CAPTION>. Essas etiquetas apresentam o atributo ALIGN que admite os seguintes parâmetros:
 
TOP insere o texto da legenda acima da tabela. Esse é o parâmetro padrão.
BOTTOM insere o texto da legenda abaixo da tabela.
 
Veja, como exemplo, a sintaxe básica para inserir uma tabela cujo título é TABELA 1 e que contém duas linhas:
 
<TABLE BORDER="1">
<CAPTION>TABELA 1 </CAPTION>
<TR><TD>primeira célula da primeira linha</TD><TD>segunda célula da primeira linha</TD></TR>
<TR><TD>primeira célula da segunda linha</TD></TABLE>
 
É interessante ressaltar que as linhas de uma tabela não precisam ter o mesmo número de células. A figura abaixo apresenta a tabela gerada pelo código acima.

Exemplo de tabela.

  Observe que esta tabela possui, na primeira linha, duas células e, na segunda, apenas uma.
 
Você pode inserir células na tabela através das etiquetas <TH> e </TH> que funcionam de forma semelhante às <TD> e </TD>. Entretanto, no caso do comando <TH> é dada uma ênfase ao texto da célula que geralmente é exibido em negrito e centralizado pelos "browsers". Por isso, esse comando é geralmente usado para especificar os títulos das colunas.
Além desse recurso, existem vários outros que permitem uma formatação mais fina da tabela:
 
BORDER= "valor" esse atributo pertencente à etiqueta <TABLE> controla a exibição de bordas na tabela, assumindo valores inteiros quaisquer a partir de zero. Sendo que zero significa bordas ausentes e quanto maior o número, mais grossa é a borda.
 
CELLSPACING= "valor" esse atributo modifica a etiqueta <TABLE> definindo o espaçamento em pixels entre as células. Veja o exemplo abaixo:

Cellspacing="5"

Cellspacing="20"

Tabela com o parâmetro CELLSPACING="5" Tabela com o parâmetro CELLSPACING="20"
 
CELLPADDING = "valor" pertencente à etiqueta <TABLE>, esse atributo define a distância interna em pixels entre o texto e a borda das células. Veja o exemplo abaixo:

Cellpadding="5"

Cellpadding="20"

Tabela com o parâmetro CELLPADDING="5" Tabela com o parâmetro CELLPADDING="20"
 
ALIGN = "LEFT", "RIGHT" ou "CENTER" esse atributo pode modificar as etiquetas <TR>, <TD> e <TH> alinhando horizontalmente o texto dentro de todas as células de uma linha – no caso da etiqueta <TR> - ou de uma célula específica no caso das etiquetas <TD> e <TH>. Admite qualquer um entre os seguintes parâmetros:
 
LEFT alinha o texto com a margem esquerda da célula
RIGHT alinha o texto com a margem direita da célula
CENTER alinha o texto colocando-o centralizado na célula
 
VALIGN = "MIDDLE", "BOTTOM" ou "BASELINE" esse atributo também pode modificar as etiquetas <TR>, <TD> e <TH> alinhando verticalmente o texto dentro de todas as células de uma linha - no caso da etiqueta <TR> - ou de uma célula específica – no caso das etiquetas <TD> e <TH>. Os valores admitidos são:
 
MIDDLE alinha o texto no meio da célula
BOTTOM alinha o texto na parte inferior da célula
BASELINE alinha o texto na parte superior da célula
 
WIDTH = "largura" pertencente às etiquetas <TD> e <TH>, esse atributo admite como parâmetro o número de pixels desejado para definir a largura de uma célula específica da tabela. É válido ressaltar que as células da mesma coluna têm a mesma largura (exceto quando, como veremos daqui a pouco, o atributo COLSPAN é utilizado tendo como parâmetro um valor diferente de 1). Você pode passar o valor da largura das células como uma porcentagem relativa à largura da tabela. Para isso basta introduzir o valor seguido de %.
 
Veja os exemplos abaixo:
<TD WIDTH="100"></TD>
<TD WIDTH="25%">
 
HEIGTH = "altura" pertencente às etiquetas <TD> e <TH>, esse atributo admite como parâmetro o número de pixels desejado para definir a altura de uma célula específica da tabela. É válido ressaltar que as células da mesma linha têm a mesma largura (exceto quando, como veremos daqui a pouco, o atributo ROWSPAN é utilizado tendo como parâmetro um valor diferente de 1).
 
<TD HEIGHT="200"></TD>
 
NOWRAP determina que o texto da célula não deve ser dividido para se ajustar ao tamanho da célula. Vale ressaltar que esse atributo não recebe valor algum como parâmetro. Para usá-lo, basta digitar seu nome na etiqueta inicial: <TD NOWRAP>
 
COLSPAN = "número_de_colunas" esse atributo modifica a aparência de qualquer célula. Pertencente às etiquetas <TD> e <TH>, é utilizado para especificar o número de colunas que a célula deve abranger. Tem o número 1 como valor padrão.
 
ROWSPAN = "número_ de_ linhas" esse atributo também modifica a aparência de qualquer célula. Pertencente às etiquetas <TD> e <TH>, é utilizado para especificar o número de linhas abaixo da célula em questão, deve ser abrangido por ela própria. Tem, também, o número 1 como valor padrão.
 
BGCOLOR = "cor" esse atributo pode aplicar uma cor de fundo na tabela inteira, quando usado com a etiqueta <TABLE>, numa linha, no caso de ser usado com a etiqueta <TR>, ou apenas em uma célula, se usado com qualquer uma das etiquetas <TD> e <TH>. Veja a sintaxe desses comandos que deixam sua tabela mais alegre:
< TABLE BGCOLOR="cor">
< TR BGCOLOR= "cor">
< TD BGCOLOR= "cor">
< TH BGCOLOR= "cor">
 
BACKGROUND = "arquivo" esse atributo aplica uma imagem no fundo da tabela inteira, quando usado com a etiqueta <TABLE>, no fundo de uma única linha, no caso de ser usado com a etiqueta <TR>, ou apenas de uma célula, se usado com uma das etiquetas <TD> e <TH>. Aceita como parâmetro o endereço do arquivo. Caso tenha dúvidas relacionadas com o endereçamento de arquivos, volte à seção “Especificando endereços”. Por exemplo:
 
<TABLE BACKGROUND = "c:\fundo.gif">
sendo fundo.gif o nome do arquivo que contém a imagem.
 
As tabelas, quando visualizadas nos "browsers" Internet Explorer e Netscape Communicator, apresentam um efeito tridimensional provocado pela diferença de cores entre as bordas superior e lateral esquerda e as bordas inferior e lateral direita da tabela. Veja a figura abaixo:
 
Existem alguns atributos da etiqueta <TABLE> que permitem a alteração da cor dessas bordas:
 
BORDERCOLOR = "cor" altera a cor de todas as bordas da tabela, que perde seu efeito tridimensional.
 
BORDERCOLORLIGHT = "cor" altera a cor da borda lateral esquerda e da borda superior da tabela. Estas bordas normalmente estão em tons mais claros para dar um efeito tridimensional à tabela.
 
BORDERCOLORDARK = "cor" altera a cor da borda lateral direita e inferior da tabela. Estas bordas normalmente estão em tons mais escuros para dar um efeito tridimensional à tabela.(Veja a figura abaixo)
 
Bordas clara e escura.
 
Você pode escolher entre exibir ou esconder as bordas da tabela, através do atributo FRAME da etiqueta <TABLE>, que admite os seguintes parâmetros:
 
BORDER exibe todas as bordas da tabela.
VOID esconde todas as bordas da tabela.
BOX   exibe apenas as bordas externas da tabela.
HSIDES exibe as bordas laterais da tabela e esconde a borda superior e a inferior.
VSIDES exibe a borda superior e a inferior da tabela e esconde as laterais.
ABOVE exibe apenas a borda superior da tabela.
BELOW exibe apenas a borda inferior da tabela.
RHS   exibe apenas a borda lateral do lado direito da tabela.
 
Você pode ainda alterar a exibição das bordas de cada célula, através do atributo RULES das etiquetas <TD> e <TH>, que admite os seguintes parâmetros:
 
NONE esconde todas as bordas da célula
ROWS exibe apenas as linhas horizontais, que limitam as linhas da tabela.
COLS exibe apenas as linhas verticais, que limitam as colunas da tabela.
ALL exibe todas as bordas da célula
 
Como já foi dito, podemos introduzir tabelas no interior de outras tabelas. Para esse fim, basta, dentro das etiquetas <TD> e </TD>, inserir <TABLE> e </TABLE> e, entre essas duas últimas etiquetas, os comandos necessários para acrescentar as linhas e células da tabela interna.
 

Exercícios: Você já pode fazer o exercício 7.

 
VoltarSubirAvançarÍndice