Trucos y preguntas frecuentes sobre diseño en HTML

¿Cómo se pueden hacer tablas con esquinas redondeadas?

En realidad no existe ningún parámetro o atributo en HTML que convierta las esquinas de una tabla en esquinas redondeadas, pero podemos utilizar el siguiente truco: colocar en cada esquina unas imágenes creadas previamente con forma de cuarto de circunferencia del mismo color que el fondo que queremos darle a la tabla.

A continuación creamos una tabla de 3 filas y 3 columnas y colocamos en cada esquina, la imagen correspondiente. Es importante alinear las de la izquierda a la izquierda y las derecha a la derecha de la celda, así como las de arriba, alinearlas arriba, y las de abajo, abajo (aunque suene a perogrullada)

El código resultante sería el siguiente:

<table>
<tr>
<td align="left" valign="top"<img src="esquina-izq-sup.gif" /></td>
<td ></td>
<td align="right" valign="top"><img src="esquina-der-sup.gif" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td ></td>
</tr>
<tr>
<td align="left" valign="bottom"><img src="esquina-izq-inf.gif" /></td>
<td ></td>
<td align="right" valign="bottom"><img src="esquina-der-inf.gif" /></td>
</tr>
</table>

Ahora sólo queda añadir el atributo de color de fondo a la tabla, procurando que sea exactamente el mismo que el de las imágenes de las esquinas. En el caso del ejemplo sería:

<table bgcolor="#0D5C94">

Y este es el resultado final:

Esta es una tabla con las esquinas redondeadas