|
Tabelas
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 design, as "grades", segundo as quais organizamos textos e
ilustrações de maneira organizada.
Como já foi possível perceber, as tabelas podem conter textos,
listas, parágrafos, imagens, diversas outras formatações -
inclusive outras tabelas. Novas versões de HTML e de navegadores
populares vêm acrescentando diversos atributos às tabelas, e nosso
objetivo aqui é saber lidar com a maioria desses recursos
disponíveis.
A formatação de tabelas faz parte da versão 3.0 da linguagem HTML.
Manipular tabelas em HTML dá trabalho e necessita de calma.
A tag para criação de uma tabela é <TABLE>, e dentro dela
você coloca atributos importantes para a criação correta da sua
tabela. Não esqueça de fazer o fechamento da tag com
</TABLE>.
- Atributos de Tabela
- <TABLE BORDER>
O elemento delimita uma tabela e a espessura de sua borda:
<TABLE BORDER=valor da espessura> ... </TABLE>
- WIDTH e HEIGHT
Com estes atributos, você pode definir o tamanho que a tabela vai
ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em
pixels ou em porcentagem. Basicamente o HEIGHT não é usado , mas o
valor de largura é muito útil. Veja como usar:
<TABLE BORDER=valor da borda WIDTH="valor da largura">
Um exemplo de tabela com valor de largura que ocupe 75% da tela
(WIDTH="75%"):
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
- Dentro dessa formatação, inserimos as linhas e elementos da
tabela:
- <TH> ... </TH>
Define um cabeçalho para a tabela
- <TR> ... </TR>
Delimita uma linha
- <TD> ... </TD>
Delimita um elemento da tabela
Veja como fica a tag para a criação de uma tabela com 2 linhas e 2
colunas:
<TABLE BORDER=2>
<TH> Coluna 1</TH><TH> Coluna 2 </TH>
<TR><TD> linha1, coluna 1</td><td> linha 1,
coluna 2 </TD></TR>
<TR><TD> linha 2, coluna 1</TD><TD>linha 2,
coluna 2 </TD></TR>
</TABLE>
Resultado:
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
Agora veja a mesma tabela sem bordas (border=0):
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
- Atributos COLSPAN e ROWSPAN
É possível dividir colunas e linhas, através dos atributos COLSPAN
(para
colunas) e ROWSPAN (para linhas):
<TABLE BORDER=2>
<TH COLSPAN=2>Colunas 1 e 2</TH>
<TR>
<TD>linha1, coluna 1</TD><TD> linha 1, coluna
2</TD></TR>
<TR><TD>linha 2, coluna 1</T><TD>linha 2,
coluna 2</TD></TR>
<TH ROWSPAN=3>3 linhas juntas</TH>
<TD>uma linha</TD>
<TR><TD>duas linhas</TD></TR>
<TR><TD>três linhas</TD></TR>
</TABLE>
Resultado:
| Colunas 1 e
2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
| 3 linhas
juntas |
uma linha |
| duas linhas |
| três linhas |
Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas
colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez,
3 linhas (rowspan=3).
- Cores de fundo
Quando você cria uma tabela, ela tem o fundo transparente e,
portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da
página. Mas é possível que você defina uma cor de fundo para cada
célula, linha e coluna da sua tabela. Para isso você deve incluir o
atributo "BGCOLOR", veja como fica:
<table border=2>
<th bgcolor="#FF0000">Coluna 1</th>
<th bgcolor="#009900">Coluna 2</th>
<tr>
<td>linha1, coluna 1</td>
<td> linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>
Resultado:
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
Você pode definir a cor de fundo de qualquer linha ou coluna que
quiser, bastando apenas incluir o atributo junto da tag de linha ou
coluna. Da mesma forma você pode incluir tags de fonte e imagem
para colocar dentro de cada célula da tabela.
- Imagem de fundo
Você também pode colocar em uma tabela uma imagem de fundo, como um
papel de parede somente para a tabela. Para isso, você só precisa
colocar o atributo "BACKGROUND". Veja como fazer:
<table border=2 background="nome da imagem que vai
aparecer">
<th><font color="#000000">Coluna
1</font></th>
<th><font color="#000000">Coluna
2</font></th>
<tr>
<td><font color="#000000">linha1, coluna
1</font></td>
<td><font color="#000000"> linha 1, coluna
2</font></td>
</tr>
<tr>
<td><font color="#000000">linha 2, coluna
1</font></td>
<td><font color="#000000">linha 2, coluna
2</font></td>
</tr>
</table>
Resultado:
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
Assim como quando colocamos uma imagem de fundo em uma página, a
imagem de fundo em uma tabela será "repetida" até preencher todo o
espaço da tabela.
Onde houver uma cor de fundo definida para a célula, coluna ou
linha a imagem de fundo não vai aparecer. Veja:
| Coluna 1 |
Coluna 2 |
| linha1, coluna 1 |
linha 1, coluna 2 |
| linha 2, coluna 1 |
linha 2, coluna 2 |
Frames - Parte
1
Os frames são divisões da tela do
navegador em diversas telas (ou "quadros"). Com isso, torna-se
possível apresentar mais de uma página por vez, por exemplo, um
índice principal em uma parte pequena da tela, e os textos
relacionados ao índice em outra parte. Trata-se de um recurso muito
usado para criar menus de navegação em que o menu sempre está fixo
e somente o outro frame muda para que apareçam as páginas.
Para criar uma página com 2 frames, você terá que criar no mínimo 3
páginas, para resultar em uma. Isso porque, neste caso, cada frame
é uma página HTML (2 frames) e há uma terceira página principal que
vai ter as informações destes frames dentro dela.
Para criar um frame, primeiro crie duas páginas simples e salve no
mesmo diretório. Crie agora uma terceira página, com a seguinte
tag:
<HTML>
<HEAD>
<TITLE> Coloque o Título aqui </TITLE>
</HEAD>
<FRAMESET COLS=20%,80%>
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
<BODY>
</BODY>
</HTML>
Lembre-se de sempre colocar o código para os frames abaixo da tag
</head> e antes da tag <body>.
A parte FRAMESET define a divisão da página em "quadros". Neste
exemplo, a página será dividida em duas colunas (Atributo COLS),
sendo a primeira com 20% do tamanho da tela, e a segunda coluna com
os restantes 80% da tela.
Dentro da formatação de FRAMESET, temos os FRAME SRC, que são
referências às páginas que serão mostradas nos frames definidos
Assim, aqui vemos que a página "a.html" será mostrada na primeira
coluna (que ocupará 20% da tela), e "b.html" será mostrada na
segunda (ocupando 80% da tela).
Substitua "a.htm" para a primeira página que você criou por "b.htm"
na segunda.
Salve e veja o resultado.
Este é o comando básico para fazer uma página com frames. Vamos ver
os tipos de frames que é possível você criar. Na seção de "Download
de Exemplos" você poderá baixar arquivos com exemplos de frames
para facilitar a construção de suas páginas.
|
