Tabela com desenho em sua base II
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.
