Tabla de bordes curvos (I)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Introducción.-

Una de las consultas que he recibido con frecuencia es cómo se pueden construir tablas que tengan los bordes curvos, en vez de las tablas típicamente rectangulares, ya que en muchas ocasiones deseamos por un lado hacer visibles los bordes de nuestras tablas, pero por otro necesitamos romper la cuadratura que se deriva de las tablas, por chocar con el diseño propio de la página en la que deben ser incluidas.

Hay que partir entonces del hecho de que, por su propia naturaleza, no es posible construir tablas con bordes curvos directamente, ya que ni el lenguaje HTML ni las Hojas de Estilo en Cascada nos ofrecen método alguno para ello.

Pero donde no llega el lenguaje si que llega nuestra imaginación y nuestra inteligencia, y puesto que no es posible conseguir lo que queremos de forma directa, vamos a crear una tabla con bordes curvos mediante una tabla auxiliar y una serie de piezas que vamos a obtener partiendo de un gráfico inicial.

La idea es la siguiente:

1. Dibujamos, usando un programa de gráficos vectoriales, un rectángulo de bordes curvos, de fondo transparente o del color de nuestra página, y con bordes del color deseado para los bordes de la tabla buscada.
2. Recortamos con cuidado y precisión las cuatro esquinas de la imagen, de tal forma que sean iguales en tamaño las dos superiores y las dos inferiores, y que coincida el ancho de todas ellas.
3. Construimos una tabla tal que defina unas celdas específicas para las cuatro esquinas y una celda central para el contenido de la tabla.
4. Situamos en las celdas de esquina de la tabla creada las imágenes antes recortadas, completando las celdas superior, inferior, derecha e izquierda con una imagen de 1x1 pixel y con un color de fondo igual al de los bordes recortados.
5. Construimos nuestra tabla, y situamos en la celda central el contenido de la misma.

Estos son los pasos que vamos a seguir, y veréis como el resultado final es el deseado.