T
u
t
o
r
i
a
l
D
H
T
M
L
/
C
S
S
E
d
a
u
r
e
l
i
o
2
0
0
1
-
2
0
0
4
TABELAS I
A tabela surgiu pela primeira no HTML na versão 3.2 e seu propósito foi
melhorar o layout da página oferecendo recursos para posicionar seus textos e imagens semelhante as
páginas dos jornais e revistas.
<TABLE>...</TABLE>
- Este é o elemento principal que estabelecce os limites da tabela. Dentro dele estão todos os demais
elementos da tabela
<TR>...</TR>
- Este elemento define a linha da tabela. PPara uma tabela, por exemplo, ter 4 linhas este atributo
deve ser escrito 4 vezes.
<TD>...</TD>
- Este define a célula da linha. Dentro dass células podemos inserir o texto, imagens, formulários e até mesmo
outra tabela.
A seguir está um exemplo de uma tabela simples montada com estas 3 tags. Observe que para criar
duas linhas tive que repetir o conjunto <TR>...</TR> duas vezes.
Para criar 3 células em cada linha repeti o conjunto <TD>...</TD>
3 vezes em cada linha. E finalmente um conjunto de <TABLE>...</TABLE>
envolvendo toda a estrutura. Só para lembrar a barra "/" antes da tag representa o fechamento dela.
TABLE é o elemento principal que
estabelece os limites de uma tabela. Ele pode conter os seguintes atributos:
BORDER="valor"
Define uma borda para a tabela. Se este atributo não estiver presente, a tabela
será exibida sem bordas ou linhas separando as células. Quando é especificado
BORDER sem nenhum valor, é criada uma borda de 1 pixel de espessura.
Sintaxe:
<TABLE>
<TD>Célula sem borda</TD>
</TABLE>
Célula sem borda
<TABLE BORDER>
<TD>Agora com BORDER = 1</TD>
</TABLE>
Agora com BORDER = 1
<TABLE BORDER="5">
<TD>Agora com BORDER = 5</TD>
</TABLE>
Agora com BORDER = 5
CELLSPACING="valor"
Controla o espaçamento entre as células de uma tabela ou torna as bordas mais grossas, se elas existirem.
Valor absoluto em pixels.
WIDTH="valor" &
HEIGHT="valor"
Permite especificar a largura e altura da tabela, seja através de um valor
absoluto em pixels ou através de uma percentagem da área da página. Para
percentagem, utilize o sinal "%" após o
número.
Os browsers
Netscape v4.51 e Opera v5.02 não reconhecem os
valores representados em %.
Reduza a janela do browser e observe o efeito que isso causa aos dois
exemplos acima. O exemplo 1 mantém o seu tamanho fixo, enquanto o exemplo 2 ajusta-se a %
da janela reduzida.
BGCOLOR="#rrggbb"
ou "nome"
Altera a cor de fundo da tabela ou apenas da célula conforme aonde ele for usado. Pode ser através do valor
RGB ou através de um dos 16 nomes padrão VGA do Windows.
BACKGROUND
="diretório/nome do arquivo"
Coloca um arquivo de imagem como fundo da tabela ou da célula. Se o arquivo de imagem estiver no mesmo
diretório do arquivo.htm onde a tabela é exibida você pode omitir o diretório no endereço do BACKGROUND.
Linha de tabela. Todas
as células são dispostas em linhas. O conjunto <TR>...</TR> deve se repetir conforme o
número que linhas que se deseja criar. Table Row pode conter os seguintes atributos:
ALIGN="left, right"
ou "center"
Controla o alinhamento horizontal do conteúdo das células na linha. Para
habilitar ALIGN configurei o espaçamento horizontal da tabela com o WIDTH="300",
para que haja o deslocamento horizontal do texto.
VALIGN="baseline, bottom,
top" ou "middle".
Controla o alinhamento vertical do conteúdo das células na linha. Para
habilitar VALIGN configurei o espaçamento vertical da tabela com HEIGHT="100", para que haja
o deslocamento vertical do texto.
NOTA: Cabana, Temimina, Pescaria e Ilusão são nomes de grutas situadas
no PETAR (Parque Ecológico e Turístico do Alto Ribeira), sul do Estado de São Paulo.
BORDERCOLOR="cor"
Define a cor da borda da linha.
BORDERCOLORDARK="cor"
Define a cor da sombra da borda da linha.
BORDERCOLORLIGHT="cor"
Define a cor da luz da borda da linha.
CHAR="caracter"
Define o caracter de alinhamento da célula que pode ser um ponto, uma vírgula ou caracteres tais como "=",
"/", ":", etc. No exemplo abaixo usei um ponto como caracter de alinhamento.
CHAROFF="número"
Define o deslocamento do caracter de alinhamento da célula.
Este seria o efeito de alinhamento de uma tabela formatada com CHAR &
CHAROFF se os browsers Internet
Explorer, Opera e Netscape fossem compatíveis com estas tags, porém tive que simular o efeito com espaços
vazios para apresentar este exemplo. Ainda não entendi como esses browsers, que já estão
em suas respectivas versões 7.0, não aceitam algumas tags do HTML v4.01 (que
foi lançado em 1999...).
TABLE DATA <TD
atributos> ... </TD>
Célula de dados da tabela.
Pode conter texto, listas, elementos de formatação de caracteres, blocos, arquivos de imagem e também
outras tabelas. Seus atributos são:
ROWSPAN=número
Especifica o número de linhas que a célula pode ocupar. O default é 1.
NOWRAP
Atributo Booleano evita que haja uma quebra de linha dentro da célula (se incluído
significa verdadeiro, senão falso). O termo booleano provém do nome do matemático
inglês George Boole (1815 / 1864),
criador da álgebra booleana.
Este atributo, em conjunto com o atributo
WIDTH, permite criar células com tamanho fixo. Assim quando o
browser é redimensionado pelo usuário, as células terão sempre o mesmo tamanho ao invés de
quebrar seu conteúdo em várias linhas. Abaixo segue duas tabelas comuns. A primeira configurada
com NOWRAP e a segunda não. Aparentemente as duas são iguais, porém minimize a janela do browser e
observe como as duas reagem.
Esta é uma tabela comum...
com uma célula configurada
COM o atributo NOWRAP.....
Esta é uma tabela comum...
com uma célula configurada
SEM o atributo NOWRAP.....
Tabela com NOWRAP
<TABLE BORDER>
<TR>
<TD NOWRAP WIDTH="200" ALIGN="center">Esta é uma tabela comum...</TD>
<TD NOWRAP WIDTH="200" ALIGN="center">com uma célula configurada</TD>
<TD NOWRAP WIDTH="200" ALIGN="center">COM o atributo NOWRAP.....</TD>
</TR>
</TABLE>
A sintaxe <TD NOWRAP WIDTH="200">...</TD>
especifica uma célula de 200 pixels de largura cujo conteúdo não pode ter quebra de linha
(text wrapping).
O browser
Opera v5.02 não suporta o recurso NOWRAP.
WIDTH=valor
Controla a largura da célula, seja através de um valor absoluto em pixels,
seja através de uma percentagem em relação à largura da tabela.
No exemplo repare que embora eu tenha configurado a primeira e a segunda célula com
WIDTH=10, a segunda só diminuiu até o limite
da largura do texto (uma palavra) inserido nela. Se o texto fosse uma frase então haveria quebra
de linhas (aumentando sua altura) e a célula se ajustaria pelo tamanho da maior palavra. Este
mesmo critério vale para HEIGHT, que ajusta a sua altura. Isso quer
dizer que não existem barras de rolagens (horizontal ou vertical) em células de tabelas.
= Espaço vazio
BGCOLOR="#RRGGBB"
Define uma cor de fundo para a célula. No exemplo abaixo estou apresentando uma configuração de cores
completa envolvendo TABLE, TR e TD.
UMA DICA: Quando o texto não oferece um contraste muito bom com a cor de fundo basta posicionar o
ponteiro do mouse sobre o texto e clicar 3 vezes. Isso altera o contraste e facilita a leitura. Aproveite
e faça um teste no exemplo acima.
BACKGROUND="diretório/nome do arquivo"
Define uma textura de fundo na célula.
BORDERCOLORDARK e
BORDERCOLORLIGHT
Têm a mesma função que estes atributos em <TABLE> porém aqui eles
são aplicados apenas em uma célula. Os exemplos já foram apresentados acima.
Um tabuleiro de xadrez (ou dama) feito com tabelas. Nele configurei no
TABLE: BORDER=7, CELLSPACING="1"; e no TD:
BGCOLOR="#ffffff"/"#000000", WIDTH & HEIGHT=30. Olhe como ficou:
TITLE HEADING <TH
atributos> ... </TH>
Este comando especifica
um título centralizado e em negrito para cada coluna.
Este elemento
é usado para especificar uma legenda à tabela e sua tag deve seguir imediatamente após a TABLE
inicial. Só deve haver uma tag desse tipo na tabela.
Atributos:
ALIGN=top, (default)
ou bottom
Controla a posição da legenda em relação a tabela.
<TABLE BORDER WIDTH="230"> <CAPTION ALIGN="bottom">Legenda na base
<TR>
<TH>Título 1</TH><TH>Título 2</TH></TR>
<TR>
<TD>célula 1</TD>
<TD>célula 2</TD></TR>
</TABLE>
Legenda na base
Título 1
Título 2
célula 1
célula 2
CABEÇALHO, CORPO E RODAPÉ DAS TABELAS
Vamos imaginar a seguinte situação: Quero criar uma tabela
que possui muitas células, distribuídas em diversas linhas, sendo que algumas células terão uma
formatação de cor e texto diferentes que as demais. Eu não posso configurar <TABLE> porque,
como falei, a células possuem formatações diferentes e <TR> não aceita formatação para células
individuais.
Nesse caso o jeito seria entrar em cada célula e inserir os parâmetros, célula
por célula... Tudo bem, já fiz isso diversas vezes e com o auxílio do comando COPY fica até mais fácil.
Porém quando a tabela é consideravelmente enorme, esse método deixa de ser adequado, pois o excesso
de formatação além de ser trabalhoso deixaria o arquivo desnecessariamente "pesado". Para resolver este
problema existem três tags criadas exclusivamente para essa finalidade:
<THEAD>...</THEAD>
- Formata o cabeçalho.
<TBODY>...</TBODY>
- Formata o corpo.
<TFOOD>...</TFOOD>
- Formata o rodapé.
Elas foram criadas exclusivamente para facilitar a formatação dos módulos da tabela.
Vamos supor que a tabela abaixo é uma lista de preços de materiais enorme, com 80 itens!!
A borda (em TABLE) possuirá uma formatação diferente que o seu título, cabeçalho e rodapé, que por sua vez serão
diferentes que o seu corpo. Configurar cada ítem do título, cabeçalho e rodapé até que seria simples, porém o corpo
da tabela possui 240 células!!! Pois em cada item possuo 3 células e como são 80 itens (3 x 80 = 240). Imagine
acionar o comando COPY 240 vezes!! Porém há quem faça, acredite!!...
Os browsers Netscape v4.51 e Opera v5.02 não reconhecem os valores representados em %.