Vamos criar neste mini-manual uma tabela com um pequeno detalhe para torná-la um pouco especial. O detalhe é uma simples imagem que colocaremos na base da tabela para simular uma silhueta especial, evitando que a tabela se mostre como um retângulo, como na é na realidade.

Como uma imagem vale mais que mil palavras, é recomendável que vermos o resultado que estamos buscando em uma página a parte para termos uma idéia exata do objetivo deste artigo.

A tabela que vamos fazer tem uma única particularidade. Colocamos na base uma imagem que faz com que pareça que tem a borda inclinada e com uma pequena sombra. Efetivamente, todo o efeito buscado se aplica com uma só imagem que colocamos na célula inferior da tabela.

A imagem é a seguinte:



A tabela então, terá duas filas e uma só coluna. Na fila superior, colocaremos o texto a introduzir en la tabla, e na inferior, a imagem. Colocaremos de cor de fundo na tabela o mesmo cinza que o da imagem, para parecer que a imagem faz parte da tabela.

O código é o seguinte:

<table width="150" 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>
+ Isto é outro texto
<br>
+ Pêras
<br>
+ Maçãs
<br>
+ Pêssegos
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabelalegal.gif" width="150" height="28" border="0"></td>
</tr>
</table>

O único detalhe que se pode destacar é que colocamos os atributos cellpadding e cellspacing a zero para evitar que haja espaço entre as células da tabela e que pareça que a célula de cima está totalmente colada a de abaixo.

Para que a célula de cima tenha uma margem, de forma que o conteúdo não fique totalmente colado na borda, foi utilizado alguns atributos de folhas de estilo que definem a margem respectivamente acima, à esquerda e à direita.

Tabela com outra cor

Se queremos fazer uma tabela com o mesmo efeito e outra cor de fundo, tal como fizemos este exemplo, necessitaremos de uma nova imagem que tenha a cor que desejamos para o fundo. Por exemplo, poderíamos utilizar uma imagem como esta:



Neste caso, o código teria sido este:

<table width="150" cellspacing="0" cellpadding="0" border="0" bgcolor="F11919">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px; color:#ffffff">
<b>Opções</b>
<br>
<br>
+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
+ Isto é outro texto
<br>
+ Pêras
<br>
+ Maçãs
<br>
+ Pêssegos
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabelamaneira.gif" width="150" height="28" border="0"></td>
</tr>
</table>

Mudamos somente a cor de fundo da tabela, colocando-a em vermelho, e a imagem, é claro...todo o resto fica igual que o primeiro exemplo.

Esperamos que este artigo tenha sido interessante para você. Com esta mesma idéia, mas com outras imagens, estamos certos de que você poderá fazer seus próprios desenhos de tabelas de forma simples.