- Código:
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.
Anime Design
