Tabela com esquinas arredondadas

Neste 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.

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.

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