A partir do artigo anterior Tabela com desenho em sua base, fizemos umas pequenas modificações para ilustrar como podemos melhorar o efeito, fazendo-o mais versátil e mantendo a simplicidade.

Como lembrará o leitor, no capítulo anterior foram criadas duas tabelas em distintas cores. Para isso, havíamos utilizado duas imagens, uma em cinza e outra em vermelho. O objetivo deste artigo é utilizar uma imagem que nos permita criar uma tabela a qual podemos aplicar distintas cores sem a necessidade de dispor de várias imagens.

O exemplo do que vamos criar pode ser visto em uma página a parte. Pode-se observar que foram criadas tabelas com distintas cores, apesar da imagem utilizada na base das três tabelas ser a mesma.

Para isso vamos criar uma imagem se adapte a tabelas com distintas cores. A idéia é criar uma imagem que tenha a cor branca na parte da tabela a qual não se deve ver e em transparente a outra zona da imagem que deve mostrar a própria cor da tabela.

A imagem em concreto é a seguinte:



Há que colocar a imagem sobre fundo que seja branco para que possa ser visto.

O código da tabela é o seguinte, que segue a mesma filosofía que no artigo anterior, o qual se desejamos mais explicações é recomendável ler o artigo precendente.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="B9B9B9">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opções</b>
<br>
<br>
+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabela.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

Esta tabela pode variar, como já adiantamos, mudando a cor de fundo da tabela, com o atributo bgcolor.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="F11919">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opciones</b>
<br>
<br>

+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabela.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

E mais nada! Esperamos que tenham entendido a técnica da imagem transparente e que este artigo tenha sido interessante.