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">
|
|