A tabela apareceu pela primeira vez no HTML versão 3.2 em 1995 e desde então tem sido um dos principais recursos de otimização da página permitindo o alinhamento de textos, imagens e blocos de informações, muitas vezes criado pela própria tabela. Os temas, a seguir, são um bom exemplo para mostrar o que podemos fazer com este recurso.
Uma forma de incrementar a apresentação de sua homepage é dividir o texto em duas ou mais colunas, estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas. Primeiro digite o texto em modo simples, sem qualquer formatação. Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o exemplo do texto em itálico, abaixo). O texto superior será a coluna direita e o inferior a esquerda.
Bloco de texto superior:
O ciclo da água na costa terrestre possui um percurso bastante complexo, parcialmente
dirigido pelo ciclo da atmosfera, importante veículo transportador da água, quer sob a forma
de gotículas finamente dispersas, quer sob a forma gasosa. A energia necessária para este
ciclo provém do calor solar, e assim, por um número infinitamente grande de vezes, uma
molécula de água é evaporada do oceano e a ele retorna, precipitada pelas chuvas, podendo
também cair no continente, infiltrando-se solo adentro, ser absolvida por uma planta qualquer
que em pouco tempo devolverá a mesma molécula à atmosfera, podendo então, direta ou
indiretamente, por meio dos regatos e rios retornar ao oceano.
Bloco de texto inferior:
Estes são os ciclos mais freqüentes, havendo, contudo, um número ilimitado de outros ciclos
mais complexos e de importância geológica. Se considerarmos uma molécula de água saindo pela
primeira vez à superfície terrestre, provinda das profundezas da crosta e trazida pelas
atividades vulcânicas como água juvenil (que nem sempre é realmente juvenil, pois o magma
pode ter assimilado sedimentos ricos em água, sendo esta novamente devolvida à superfície),
poderá ela tomar diversos rumos. Condensando-se em chuva e caindo no oceano, poderá ser
levada às grandes profundezas e novamente aprisionada junto aos sedimentos abissais por
várias centenas de milênios, até ser novamente incorporada a um magma e novamente expulsa.
Agora vou inserir os parâmetros de tabela <table> , envolvendo os dois blocos de texto, superior e inferior. Entre eles irei inserir uma coluna intermediária com <td width="4%">, dentro da qual colocarei uma linha vertical só por questão de estética e acabamento. O código fonte é o seguinte:
Sintaxe:
<table>
<tr>
<td width="48%">
Bloco de texto superior...
</td>
<td width="4%">Linha vertical(*)
</td>
<td width="48%">
Bloco de texto inferior...
</td></tr></table>
(*) NOTA A sintaxe de criação da linha vertical encontra-se no seguinte exemplo:
O resultado é este:
|
Bloco de texto superior: |
|
Bloco de texto inferior: |
Observe que a soma de "width="48%" + "4%" + "48%" = 100% que é a largura da tela do seu monitor. A coluna do centro serve como um separador de texto e é dentro dessa coluna que está inserida a linha vertical.
Agora vou usar o mesmo exemplo para inserir imagens nas colunas.
Sintaxe:
<table>
<tr>
<td width="48%">
Bloco de texto superior, primeiro parágrafo...
<img src="imagens/nuvens.jpg" align="left" vspace="6" hspace="10" border="2">
Bloco de texto superior, segundo parágrafo... </td>
<td width="4%">Linha vertical</td>
<td width="48%">
<img src="imagens/sunset11.jpg" align="left" vspace="6" hspace="10" border="2">
Bloco de texto inferior...</td>
</tr>
</table>
|
Bloco de texto superior: |
|
Bloco de texto superior: |
A energia necessária para este ciclo provém do calor solar, e assim, por um número
infinitamente grande de vezes, uma molécula de água é evaporada do oceano e a ele retorna,
precipitada pelas chuvas, podendo também cair no continente, infiltrando-se solo adentro, ser
absolvida por uma planta qualquer que em pouco tempo devolverá a mesma molécula à atmosfera,
podendo então, direta ou indiretamente, por meio dos regatos e rios retornar ao oceano.
Estes são os ciclos mais freqüentes, havendo, contudo, um número ilimitado de outros ciclos
mais complexos e de importância geológica. Se considerarmos uma molécula de água saindo pela
primeira vez à superfície terrestre, provinda das profundezas da crosta e trazida pelas
atividades vulcânicas como água juvenil (que nem sempre é realmente juvenil, pois o magma
pode ter assimilado sedimentos ricos em água, sendo esta novamente devolvida à superfície),
poderá ela tomar diversos rumos. Condensando-se em chuva e caindo no oceano, poderá ser
levada às grandes profundezas e novamente aprisionada junto aos sedimentos abissais por
várias centenas de milênios, até ser novamente incorporada a um magma e novamente expulsa.
Pronto! Ficou bonita mas vou incrementá-la um pouco mais: Imagine o mesmo exemplo com figura de centro e o texto margeando suas duas laterais. Para isso vou criar mais dois blocos de tabela, com três divisões cada, e trabalhar com eles. O layout da interface ficará assim:
A sintaxe é esta:
<table>
<tr>
<td width="48%">Texto 1...</td>
<td width="4%"></td>
<td width="48%">Texto 4...</td>
</tr>
</table>
<table>
<tr>
<td width="25%">Texto 2...</td>
<td width="50%"><img src="imagens/sky03.jpg" align="left" vspace="6"
hspace="10" Border="2"></td>
<td width="25%">Texto 5...</td>
</tr>
</table>
<table>
<tr>
<td width="48%">Texto 3...</td>
<td width="4%"></td>
<td width="48%">Texto 6...</td>
</tr>
</table>
Resultado...
| O ciclo da água na costa terrestre possui um percurso bastante complexo, parcialmente dirigido pelo ciclo da atmosfera, importante veículo transportador da água, quer sob a forma de gotículas finamente dispersas, quer sob a forma gasosa. | Estes são os ciclos mais freqüentes, havendo, contudo, um número ilimitado de outros ciclos mais complexos e de importância geológica. Se considerarmos uma molécula de água saindo pela primeira vez à superfície terrestre, provinda das profundezas da crosta e trazida pelas |
| A energia necessária para este ciclo provém do calor solar, e assim, por um número infinitamente grande de vezes, uma molécula de água é evaporada do oceano e a ele retorna, precipitada pelas chuvas, podendo também cair no continente, |
|
atividades vulcânicas como água juvenil (que nem sempre é realmente juvenil, pois o magma pode ter assimilado sedimentos ricos em água, sendo esta novamente devolvida à superfície), poderá ela tomar diversos rumos. |
| infiltrando-se solo adentro, ser absolvida por uma planta qualquer que em pouco tempo devolverá a mesma molécula à atmosfera, podendo então, direta ou indiretamente, por meio dos regatos e rios retornar ao oceano. | Condensando-se em chuva e caindo no oceano, poderá ser levada às grandes profundezas e novamente aprisionada junto aos sedimentos abissais por várias centenas de milênios, até ser novamente incorporada a um magma e novamente expulsa. |
Os comandos de tabelas também são práticos para alinhar várias imagens lado a lado. Os exemplos mostrados, a seguir, explicam como é fácil fazer isso. Vamos começar com o básico alinhando três arquivos de imagem.gif.
Sintaxe:
<center>
<table border>
<tr>
<td><img src="imagens/brasil.gif"></td>
<td><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif"></td>
</tr>
</table>
</center>
 |
 |
 |
Configurando border="0" e usando cellpadding="50" para aumentar os espaços entre as figuras temos os seguintes resultados:
Sintaxe:
<center>
<table border="0" cellpadding="50">
<tr>
<td><img src="imagens/brasil.gif"></td>
<td><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif"></td>
</tr>
</table>
</center>
|
|
|
Você pode inserir um texto do lado direito, esquerdo, ou, usando a tag <BR>, (BReak line = quebra de linha), acima e abaixo da imagem.
Sintaxe:
<center>
<table border="0" cellpadding="50">
<tr>
<td><img src="imagens/brasil.gif"><br>Bandeira do Brasil</td>
<td>Sol de verão<br><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do Brasil |
Sol de verão |
Sorria!!! |
Agora vamos inserir uma cor de fundo com o atributo bgcolor:
Sintaxe:
<center>
<table border="0" cellpadding="50" bgcolor="#87ceeb">
<tr>
<td><img src="imagens/brasil.gif"><br>Bandeira do Brasil</td>
<td>Sol de verão<br><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do Brasil |
Sol de verão |
Sorria!!! |
Ainda usando o mesmo exemplo para inserir um background.
Sintaxe:
<center>
<table border="0" cellpadding="50" background="imagens/mmb_bg.gif">
<tr>
<td><img src="imagens/brasil.gif"><br>Bandeira do Brasil</td>
<td>Sol de verão<br><img src="imagens/sol2.gif"></td>
<td><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do Brasil |
Sol de verão |
Sorria!!! |
Agora vamos inserir cores e backgrounds nas células, alternadamente. Coloquei o cellspacing="0" para eliminar os espaços entre as células.
Sintaxe:
<center>
<table border="0" cellpadding="50" cellspacing="0">
<tr>
<td bgcolor="#87ceeb"><img src="imagens/brasil.gif"<br>Bandeira do Brasil></td>
<td background="imagens/mmb_bg.gif">Sol de verão<br><img src="imagens/sol2.gif"></td>
<td bgcolor="#88cf00"><img src="imagens/sorriso.gif">Sorria!!!</td>
</tr>
</table>
</center>
Bandeira do Brasil |
Sol de verão |
Sorria!!! |
Pronto!!
INSERINDO GIFS ANIMADOS EM BACKGROUND
Geralmente utilizamos uma barra animada para realçar um título, separar textos, figuras ou simplesmente como enfeite ilustrativo. Mas... qual será a reação dos browsers (navegadores) se eu inserir um gif animado como um background? Será que funciona?? Fiz essa experiência com os três browsers mais utilizados na Rede e descobri que apenas o Opera não aceita este artifício. Aqui estão alguns exemplos de gifs animados de barras que podem ser inseridos como background em uma tabela.
Sintaxe:
<center>
<table border="1" cellpadding="15">
<tr>
<td background="imagens/barani11.gif" width="100" align="center">
<font color="1e90ff"><b>barani.gif</b></font></td>
<td background="imagens/bowline.gif" width="100" align="center">
<b>bowline.gif</b></td>
<td background="imagens/utlign26.gif" width="100" align="center">
<font color="ffffff"><b>utlign26.gif</b></font></td>
</tr>
</table>
</center>
Resultado:
| barani.gif | bowline.gif | utlign26.gif |