Comando
<TABLE>...</TABLE>
A formatação de
tabelas foi adotada bem antes de sua inclusão na definição de HTML.
A manipulação de tabelas, mesmo em editores, é trabalhosa; a
maior diferença entre tabelas em HTML e em
editores como o MS Word, entretanto, é o fato
das tabelas em HTML serem definidas apenas em
termos de linhas e não de colunas. Mas isso será percebido
no decorrer destas páginas. As tabelas foram uma grande
conquista para os autores de documentos para a Web.
Com elas é possível, por exemplo, termos estas páginas do
tutorial organizadas em colunas, sendo uma delas voltada
exclusivamente aos links de navegação e observações. Tabelas
implementam um conceito importante de layout: as grades,
segundo as quais organizamos textos e ilustrações de maneira
harmoniosa. Como já foi possível perceber, as tabelas contêm
textos, listas, parágrafos, imagens, diversas outras formatações
- inclusive outras tabelas. Novas versões de HTML
e de browsers populares vêm acrescentando diversos atributos às
tabelas, e nosso objetivo aqui é saber lidar com a maioria
desses recursos disponíveis. O comando TABLE
define a tabela: Um de seus atributos básico é BORDER
que indica se a tabela terá uma borda ou não.
|
Principais Atributos
Código | Finalidade |
---|---|
< CAPTION >...</ CAPTION >
|
define o título da tabela |
< TH >...</ TH >
|
define um cabeçalho
para colunas ou linhas (dentro de <TR> )
|
< TR >...</ TR >
|
delimita uma linha |
< TD >...</ TD >
|
delimita um
elemento ou célula (dentro de <TR> )
|
< BGCOLOR ="#999999">
|
Define uma cor de fundo para a tabela, linha ou elemento. |
< CELLPADDING ="99">
|
Define o espaço entre o conteúdo e a borda da célula. |
< CELLSPACING ="99">
|
Define o tamanho do espaço da borda entre as células. |
Veja o código
necessário para definir uma tabela simples:
Código | Resultado | ||||||
---|---|---|---|---|---|---|---|
<TABLE BORDER=4>
<CAPTION>Primeiro exemplo</CAPTION>
<TR><TH>Coluna 1</TH><TH>Coluna
2</TH></TR> <TR><TD>linha1,coluna1</TD><TD>linha1,coluna
2</TD></TR> <TR><TD>linha2,coluna1</TD><TD>linha2,coluna
2</TD></TR> </TABLE> |
|
Veja o
exemplo abaixo, onde podemos definir títulos
compreendendo mais de uma coluna ou linha. É possível
englobar colunas e linhas, através dos atributos COLSPAN
(para colunas) e ROWSPAN
(para
linhas). Neste exemplo, vemos que o cabeçalho Colunas
1 e 2 compreende duas colunas (COLSPAN=2
);
o cabeçalho 3 linhas compreende, por
sua vez, 3 linhas (ROWSPAN=3
).
Código | Resultado | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>L1,C1</TD><TD>L1,C2</TD></TR> <TR><TD>L2,C1</TD><TD>L2,C2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>1 linha</TD></TR> <TR><TD>2 linhas</TD></TR> <TR><TD>3 linhas</TD></TR> </TABLE> |
|
Tabelas
podem ser definidas sem borda. Pode ser interessante para
aplicações onde é necessário alinha textos e figuras
mais facilmente ou ainda para colocar uma coluna com índice
ao lado da sequência do texto normal. Veja o mesmo
exemplo acima agora sem borda:
Código | Resultado | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
<TABLE BORDER=0> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>L1,C1</TD><TD>L1,C2</TD></TR> <TR><TD>L2,C1</TD><TD>L2,C2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>1 linha</TD></TR> <TR><TD>2 linhas</TD></TR> <TR><TD>3 linhas</TD></TR> </TABLE> |
|
Tabelas
podem ser definidas com uma cor de fundo, que vai se
aplicar a todas as células da tabela. Podemos ainda
definir um valor para colocar um espaço maior entre as células,
com o atributo CELLPADDING, e o atributo CELLSPACING
pode ser usado para colocar bordas maiores entre as células.
Veja o exemplo abaixo:
Código | Resultado | ||||||
---|---|---|---|---|---|---|---|
<TABLE BORDER=5
CELLSPACING=15 CELLPADDING=5 BGCOLOR = "#E1FFD9" >
|
|
Tabelas
podem ser definidas com cores específicas para as bordas.
Veja no exemplo abaixo:
Código | Resultado | ||||||
---|---|---|---|---|---|---|---|
<TABLE BORDER=5
CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"
BORDERCOLOR = "#00FF00" >
|
|
Nas tabelas
pode ser colocado um fundo como uma imagem. O formato é
similar a colocação de uma imagem na página, ou seja,
usa-se o comando BACKGROUND. Veja o exemplo abaixo:
Código | Resultado | ||||||
---|---|---|---|---|---|---|---|
<TABLE BORDER=5 BACKGROUND = "imagem3.GIF" >
|
|