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:
- Código:
-
<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 corSe 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:
- Código:
-
<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.
