Tabela com esquinas arredondadas

	Tabela com esquinas arredondadas Corpo da tabela. Podemos colocar o texto que desejarmos, que a tabela crescerá em altura suficiente para contê-lo.

Nesta artigo prático de HTML
vamos criar uma tabela com as esquinas arredondadas, que poderá servir
para destacar alguma informação no texto ou criar uma barra de links
lateral um pouco mais vistosa. Abaixo aparece uma tabela como a que
pretendemos conseguir.



O exemplo não é nada complexo. Simplesmente cria-se uma tabela normal,
na qual colocamos em cada uma de suas esquinas um gráfico que faz a
forma arredondada. Os gráficos que utilizamos nesta ocasião têm uma
parte com cor e outra transparente. A parte com cor é a que desenha a
borda arredondada e a parte transparente deixa ver a cor de fundo que
tivermos colocado na tabela. As imagens podem ser vistas em seguida.
Para salvá-las utilize o botão direito do mouse em cima da imagem e selecione a opção que põe "Salvar imagem como..." ou algo parecido.







Em nosso exemplo, criamos imagens
que têm a parte não transparente de cor branca, que corresponde com a
cor de fundo da página onde queremos colocar a tabela. Se quisermos
colocar uma tabela como esta sobre um fundo diferente do branco,
deveríamos criar uns gráficos que tenham a mesma cor que o fundo, no
lugar do branco.

	Tabela com esquinas arredondadas Esta tabela tem outra cor de fundo, mas foi criada com as mesmas imagens que a tabela anterior.

O bom de que a outra cor utilizada na imagem seja transparente é que a
tabela que criamos pode ter a cor de fundo que desejarmos. Esta outra
tabela abaixo foi criada com as mesmas imagens do exemplo e, como se
pode ver, tem outra cor de fundo que a anterior.




Criação da tabela



Agora vamos estudar o código HTML que precisamos para criar esta tabela
com esquinas arredondadas. Provavelmente com outro código HTML mais
simples também se poderia construir.




A tabela que utilizamos contem várias células dispostas em

duas filas e três colunas. Nas células das esquinas da tabela colocamos
as quatro imagens que fazem o efeito das bordas arredondadas. Para
certificarmos de que a colocação das imagens é a correta -procurando que
as imagens fiquem coladas nas esquinas da tabela-, utilizamos os
atributos que servem para alinhar o conteúdo da célula: align para o
alinhamento horizontal e valign para o vertical.



Na célula do centro é onde colocamos o corpo da tabela, com todo o texto que queremos que vá dentro, suas imagens, etc.

O único detalhe a assinalar é que expandimos a célula central para que ocupe duas filas, com rowspan=2.





<table width=300 cellspacing=0 cellpadding=0 bgcolor="#333399" border=0 align="right">

<tr>

<td width=11 valign="top" align=left><img src="images/sup-izq.gif" width=11 height=11></td>

<td rowspan=2>

<font color="#ffffff" face="verdana,arial,helvetica" size=1>

<br>

<b>Tabela com esquinas arredondadas </b>

<br>

<br>

Corpo da tabela. Podemos colocar o texto que desejarmos, que a tabela crescerá em altura suficiente para contê-lo.

<br>

<br>

</font>

</td>

<td width=11 valign="top" align=right><img src="images/sup-der.gif" width=11 height=11></td>

</tr>

<tr>

<td width=11 align=left valign=bottom><img src="images/inf-izq.gif" width=11 height=11></td>

<td width=11 align=right valign=bottom><img src="images/inf-der.gif" width=11 height=11></td>

</tr>

</table>





Se alguém deseja utilizar este código para criar suas próprias tabelas, deverá modificar unicamente poucos dados:

• Texto do corpo da tabela
  
• Color de fondo de la tabela