Tablas con esquinas redondeadas

Las tablas con esquinas redondeadas se utilizan, por ejemplo, para resaltar alguna parte del texto, dentro del mismo, o una información relacionada, colocada en cualquiera de los costados del texto, izquierdo o derecho, o crear una barra lateral de enlaces. Esto se puede hacer con tablas normales, pero con esquinas redondeadas el diseño es más vistoso.

Para crear una tabla con esquinas redondeadas simplemente se crea una tabla normal, en la que se coloca, en cada una de sus esquinas un gráfico que hace la forma redondeada. Estos gráficos pueden ser de dos,clases:

Gráficos con una parte del mismo color del fondo de la tabla, que dibuja el borde redondeado, y una parte transparente que deja ver el color del fondo de la página en donde se está colocando la tabla.
Gráficos con una parte del mismo color del fondo de la tabla, que dibuja el borde redondeado, y una parte del mismo color del fondo de la página en donde se está colocando la tabla.

En el primer caso se pueden diseñar tablas de cualquier color, sin tener en cuenta el color del fondo de la página. En el segundo, además del color del fondo de la tabla, el gráfico debe tener también el color del fondo de la página. Aquí se tratarán las tablas del segundo caso ya que, aunque pareciera lo contario, son más sencillas de crear porque no es necasario agregar imágenes transparentes. Creación de las esquinas

Con el programa PAINT es fácil diseñar las esquinas. Los siguientes son los pasos a seguir:

Con las autoformas Rectángulo y Elipse se crea una circunferencia dentro de un cuadrado, teniendo presente que los lados del cuadrado deben ser tangentes de la circunferencia.
Los cuatro espacios que deja libre la circunferencia dentro del cuadrado se rellenan con el mismo color del fondo de la página en donde se va a colocar la tabla.
El círculo formado por la circunferencia se rellena con el color de la tabla que se va a crear.
La figura así formada se divide en cuatro partes iguales.
Se corta la figura, dejando solamente una de las partes en que se ha dividido, preferiblemente la superior izquierda.
La parte que se ha dejado se va girando 90 grados y de esta forma se guardan las cuatro esquinas: superior izquierda, superior derecha, inferior izquierda e inferior derecha.

1 - 2 - 3

4 - 5 - 6

Estas son las esquinas resultantes del proceso anterior:

Se guardan en un archivo para después subirlas al blog cuando se cree la tabla.

Creación de la tabla

Ahora se trata el código HTML necesario para crear una tabla con esquinas redondeadas. Contiene atributos y etiquetas que aseguran que se puede visualizar correctamente en todos los navegadores.

La tabla contiene varias celdas dispuestas en dos filas y tres columnas. En las celdas de las esquinas se colocan las imágenes que hacen que los bordes aparezcan redondeados. En la celda central, que está expandida a dos filas con el atributo rowspan=2, se coloca el cuerpo de la tabla, con el texto, imágenes, etc.

<table width=300 align="center" cellspacing=0 cellpadding=0 bgcolor="#bdbdbd" border=0 > <tr> <td width=11 valign="top" align=left bgcolor="#bdbdbd"> <img src="images/sup_izq.jpg" width="25px" height="25px" /> </td> <td rowspan=2> <center><BIG>TEXTO</BIG></center> </td> <td width=11 valign="top" align=right bgcolor="bdbdbd"> <img src="images/sup_der.jpg" width="25px" height="25px" /> </td> </tr> <tr> <td width=11 align=left valign=bottom bgcolor="bdbdbd"> <img src="images/inf_izq.jpg" width="25px" height="25px" /> </td> <td width=11 align=right valign=bottom bgcolor="bdbdbd"> <img src="images/inf_der.jpg" width="25px" height="25px" /> </td> </tr> </table>

Después de img src=" se deben colocar las direcciones de las imágenes de las esquinas creadas según explicación. Y en la celda del TEXTO todo lo que el usuario desee.

Nota: En el artículo seguiente se explica cómo poner color a las esquinas redondeaddas.