O objetivo desta seção não é apenas apresentar tabelas com aplicações dos atributos ROWSPAN e COLSPAN (quando uma célula ocupa mais de uma linha ou coluna, tipo organograma), mas também apresentar e ensinar aquelas tabelas criativas, elaboradas, que parecem um quebra-cabeças, verdadeiros exercícios de paciência e obstinação.

GRÁFICOS DE BARRAS

Certo dia, quando analisava alguns gráficos do jornal Folha de São Paulo, perguntei a mim mesmo: Será que conseguiria criar esses mesmos gráficos com a tag <TABLE> do HTML? Após gastar cerca de uma hora com a montagem das matrizes a resposta foi SIM!! E ficaram bonitos, também. E, outro detalhe, após pegar o jeito eles ficam relativamente simples. Eu não acredito que seja o primeiro a utilizar uma tabela dessa forma mas, até a presente data, ainda não encontrei ninguém fazendo isso. Geralmente o webmaster utiliza arquivos gif ou jpg que (cá entre nós), além de serem mais trabalhosos ocupam mais espaço na página, também.

Aproveitando uma aplicação útil para meus novos gráficos em HTML aqui vai uma informação interessante: A freqüência mensal de minha HP nos últimos meses. A última vez que fiz um cadastro do meu Tutorial numa ferramenta de busca foi em julho de 2001 e de lá pra cá sua freqüência vem aumentando em escala geométrica.

TUTORIAL HTML EDAURELIO FREQÜÊNCIA: pessoas/mês OUTUBRO 504 NOVEMBRO 490 DEZEMBRO 258 JAN/2002 669 FEVEREIRO 550 MARÇO 1119 ABRIL 1354 MAIO 1217

Dados fornecidos pela

Agora vamos analisar passo-a-passo como montar o gráfico. Ele nada mais é que um conjunto de módulos sendo que cada módulo consiste numa tabela inserida dentro da outra. A sintaxe abaixo seria o módulo outubro.

Módulo Outubro

<TABLE STYLE="border-collapse:collapse"> <TR> <TD WIDTH="65" ALIGN="right">OUTUBRO</TD> <TD HEIGHT="17">   <TABLE BORDER BGCOLOR="#8fbc8f" WIDTH="126" HEIGHT="17">   <TR><TD></TD></TR></TABLE></TD> <TD HEIGHT="17" valign="middle">504</TD> </TR> </TABLE>

OUTUBRO 504

ESCALA 4:1 504 pessoas / 4 = 126 pixels

Observe que dentro do módulo existem três células <TD> A primeira célula define o espaço onde é inserido o mês (WIDTH="60") e o seu alinhamento pela direita (ALIGN="right"). A segunda define a altura da barra (HEIGHT="17") e possui outra tabela em seu interior cuja função é definir a cor da barra (BGCOLOR="#8fbc8f"), seu comprimento (WIDTH="126") e textura (BORDER + <TD></TD> sem conteúdo). A terceira célula define o espaço onde é inserido o valor 504, (que é a freqüência do mês) e o seu alinhamento pelo meio (valign="middle").

Pronto, agora basta copiar esse mesmo módulo quantas vezes quiser e configurar seus valores de comprimento. Em meu gráfico utilizei a escala 4:1, (4 pessoas para cada pixel), mas você pode escolher qualquer escala conforme melhor lhe convier. Abaixo estou apresentando o mesmo gráfico só que na versão vertical.

504	490	258	669	555	1119	1354	1217	784	816	677	513	584	419	496
OUT	NOV	DEZ	JAN	FEV	MAR	ABR	MAI	JUN	JUL	AGO	SET	OUT	NOV	DEZ

TUTORIAL HTML EDAURELIO
GRÁFICO DE FREQUÊNCIA 2001/2002
pessoas/mês

O gráfico de barras vertical segue o mesmo princípio só que ele é um pouco mais complexo. Vou pegar o módulo outubro e comparar sua sintaxe com o de novembro (o módulo outubro está em BOLD e o de novembro em fonte PRETA), ambos estão dentro da estrutura geral do gráfico:

<TABLE> <TR> <TD HEIGHT="300" valign="bottom"> <TABLE BORDER BGCOLOR="#add8e6" HEIGHT="101" WIDTH="30"><TR>504 </TD><TD></TD></TR></TABLE></TD>   <TD HEIGHT="400" valign="bottom"> <TABLE BORDER BGCOLOR="#add8e6" HEIGHT="98" WIDTH="30"><TR> 490 <TD></TD></TR></TABLE></TD>  ...   </TR> <TR> <TD ALIGN="center">OUT</TD> <TD ALIGN="center">NOV</TD>  ... </TR> </TABLE>

Agora o módulo é composto de apenas uma célula que, por sua vez, contém outra tabela. Na célula <TD> é definido a altura máxima do gráfico HEIGHT="300" e que seu conteúdo deve estar alinhado pela base valign="bottom". E na tabela definimos sua cor BGCOLOR="#add8e6", altura do módulo do mês HEIGHT="168" e sua largura WIDTH="30". Nesse gráfico usei a escala 5:1 (5 pessoas para cada pixel), 504 pessoas / 5 = 101 pixel (valor arredondado).

504	490
OUT	NOV

Mais alguns modelos de gráficos de barras com valores aleatórias. Eles seguem o mesmo princípio.

54   61     86   97     113  138 OUT   DEZ   FEV TUTORIAL HTML EDAURELIO GRÁFICO DE BARRAS GEMINADAS ilustrativo

58   31   MAR  ABR  MAI  19   JAN  FEV -12  -25   -8   JUN TUTORIAL HTML EDAURELIO GRÁFICO DE BARRAS INVERTIDAS ilustrativo

NOTA: O browser Netscape v4.51 não aceita o parâmetro BGCOLOR de uma tabela que estiver inserida dentro de outra tabela. Já os browseres IE v5.5 e o Opera v5.02 aceitam esse parâmetro perfeitamente.

 

BANNER TUTORIAL EDAURELIO

Este é uma versão do quadro que uso na abertura da minha HP. Ele possui 9 tabelas intercaladas, uma dentro da outra, criando um efeito de banner. Deu um trabalhão danado cria-la e passei duas noites em claro tentando faze-la funcionar nos três browsers.

No começo apenas tinha uma imagem na cabeça de como ela deveria ficar, partindo disso fui montando sua estrutura. Logicamente na primeira tentativa ficou uma droga e embora ela apresentasse uma estrutura coerente no Internet Explorer, não havia jeito de faze-la funcionar no Netscape ou no Opera, então fui "pescando" as gafes de sintaxe aqui e ali. Olhando o código-fonte fica mais fácil de entender como ela foi criada.

Ainda sobre tabelas em forma de banner, estou criando um outro site sobre Espeleologia cuja barra de topo é uma mistura de vários recursos HTML. O link é este aqui: [ IRCN - Indice de Referências de Cavidades Naturais de São Paulo].

 

TABELA COM IMAGENS LINKADAS

Agora uma tabela contendo imagens que se alternam quando são clicadas com o mouse. No exemplo abaixo eu coloquei 3 células de tabela contendo 3 imagens diferentes mas a quantidade de células assim como de imagens podem variar conforme o gosto do freguês. Logicamente, por uma questão de estética, as células e imagens deverão ter tamanhos iguais entre si.

Clique sobre as imagens...

PRIMEIRA ETAPA: Selecionei as 3 imagens, sakura.gif, libra.jpg e light.jpg com tamanhos iguais (width="150" heiht="338"). Em seguida criei a estrutura de tabela normal com 3 células. Dentro dessas células inseri os parâmetros da tag IFRAME. Então a tabela ficou assim:

<CENTER> <TABLE BORDER BORDERCOLOR="#4682b4"> <TR> <TD><IFRAME src="arquivo-a.htm" width="150" height="338" scrolling="no" frameBORDER="0"></IFRAME></TD> <TD><IFRAME src="arquivo-b.htm" width="150" height="338" scrolling="no" frameBORDER="0"></IFRAME></TD> <TD><IFRAME src="arquivo-c.htm" width="150" height="338" scrolling="no" frameBORDER="0"></IFRAME></TD> </TR> </TABLE> </CENTER>

Observe que cada IFRAME tem o mesmo tamanho das imagens. O atributo scrolling="no" omite aquelas barras de rolagens horizontal e vertical, frameBORDER="0" elimina o efeito de borda em baixo relevo. Porém as imagens não são inseridas diretamente dentro do IFRAME, para isso criei 3 arquivos HTML que chamei arquivo-a.htm, arquivo-b.htm e arquivo-c.htm sendo que cada um possui SÓ, E SOMENTE SÓ, uma imagem.

 

SEGUNDA ETAPA: Os arquivos HTML com as imagens contidas são simples, porém possuem alguns parâmetros importantes. Como exemplo vou apresentar a sintaxe de apenas um deles, os outros dois são semelhantes só mudando os nomes do arquivo e sua respectiva imagem. Aqui está ele:

Sintaxe do arquivo-a.htm

<HTML> <HEAD> <TITLE>IMAGEM LIGHT</TITLE> </HEAD> <BODY bgcolor="#000000"> <DIV STYLE="position: absolute; left: 0px; top: 0px"> <A HREF="arquivo-b.htm"><IMG SRC="imagens/light.jpg" width="150" height="338"></A> </DIV> </BODY> </HTML>

Observe que a imagem light.jpg deste arquivo possui um link chamando o arquivo-b. A imagem do arquivo-b possui outro link chamando o arquivo-c e a imagem deste um link chamando o arquivo-a, fechando o loop de 3 saltos. Bom... este é só um exemplo de como a coisa funciona. Cada um pode fazer da sua maneira conforme o talento e a inspiração do momento. Caso as explicações não ficaram bem claras, relaxe..., aconselho imprimi-las. Depois analisando-as com calma as coisas começam a parecer simples. Boa sorte!!