|
Uma tabela é
basicamente formada por linhas.
Linhas horizontais e
verticais, que se cruzam e formam quadrados internos, a que chamamos
células.
Uma tabela tem largura e altura, da mesma forma que
cada uma das suas células.
O uso de tabelas, seja nas
formatações de e-mails, seja nas páginas de sites, ajuda bastante a
organizar o modo de apresentação da mensagem (imagens e texto) e
serve ainda para destacar algum elemento dessa mensagem.
Em
geral, nos e-mails, só costumamos usar tabela com uma linha e uma
coluna, ou seja, com apenas uma célula, por isso fica um "retângulo
grandão" (ou até mesmo tabelas dentro de tabelas, em outras
palavras, retângulo dentro de retângulo).
Toda tabela inicia com
o tag <TABLE> e encerra com o fechamento respectivo
</TABLE> . Tudo o que estiver compreendido entre esse
dois tags TABLE refere-se à tabela.
Borda
da Tabela
Podemos decidir se queremos que a tabela
mostre a borda (quando queremos dar efeito de moldura) ou definimos
uma borda bem fininha ou até inexistente (border = 0 ou border size
= 0).
O atributo da borda é colocado dentro do tag
<TABLE>.
bordercolor: refere-se à cor das
bordas.
Podemos ainda definir uma moldura para a tabela com
os mesmos estilos que usamos para a moldura da mensagem (ridge,
groove, inset, outset, double, solid, dashed e dotted). Estudaremos
em detalhe esse assunto no exercício prático que está na página a
seguir.
Nos códigos de algumas tabelas encontraremos os
termos: borderColorDark e borderColorLight que são efeitos de cores em
molduras (ou bordas).
Dimensões da
tabela
Além de controlar a largura da borda (com o
atributo BORDER), é possível definir as dimensões (em pixels) de
toda a tabela, espaço entre células e as margens dentro das células.
Todos esses controles são feitos através de atributos dentro do tag
<TABLE>. Os atributos são:
WIDTH: para definir a
largura da tabela
HEIGHT: para definir a altura da
tabela
CELLPADDING: é a medida da distância interna dentro da
célula. É como se fosse uma margem interna que impede que o texto ou
imagem "grude" na borda da tabela.
CELLSPACING: é uma medida
para separar uma célula da outra, para definir o espaço entre as
células.
Os atributos width e height também podem ser
utilizados para definir o tamanho de células específicas. Neste
caso, devem ser colocado dentro do tag <TD>
As
dimensões de uma tabela usam como unidade de comprimento o pixel (ou
no plural, pixéis), mas também vamos encontrar, especificamente para
a largura, a dimensão dada em percentagem.
Tipos de Alinhamento
Os elementos dentro
da tabela podem ser alinhados da mesma forma que um parágrafo comum.
Se nenhum alinhamento for definido, o conteúdo das células é
alinhado horizontalmente à esquerda e verticalmente ao centro. Os
atributos ALIGN (alinhamento horizontal) e VALIGN (alinhamento
vertical) devem ser usados dentro dos tags <TR> e
TD>
Os alinhamentos possíveis são:
Alinhamento
horizontal
ALIGN=LEFT: alinha o conteúdo à
esquerda
ALIGN=RIGHT: alinha o conteúdo à
direita
ALIGN=CENTER: alinha o conteúdo ao
centro
Alinhamento vertical
VALIGN=BASELINE: mantém as
linhas de texto com o mesmo alinhamento (para ser usado dentro de
<TR> ou no primeiro <TD> de uma linha)
VALIGN=TOP:
alinha o conteúdo no topo
VALIGN=MIDDLE: alinha o conteúdo ao
centro
VALIGN=BOTTOM: alinha o conteúdo na base da
célula
Cor de fundo das
células
O Internet Explorer, navegador da Microsoft,
permite atribuir cores diferentes para o fundo de cada célula. Basta
acrescentar o atributo BGCOLOR com a cor desejada nos tags de
célula. Em algumas combinações de cores será necessário também
modificar a cor das letras. Isso é feito com o atributo COLOR dentro
do tag <FONT>
Não se preocupe se não estiver
compreendendo muito essas primeiras explicações teóricas. Na próxima
parte faremos um exercício prático e você ao acompanhar cada passo,
compreenderá perfeitamente. Aí, retorne à leitura desta página e
ficarão mais claros os conceitos aqui tratados.
Vamos
lá? |
