Estás en: Artículos

En este curso no se pretende dar a conocer como se crear o manipular las tablas, sino que se pretende verlas desde un punto de vista diferente.

En este artículo voy a demostrar la forma de hacer una tabla con la apariencia de esquinas redondeadas.

Empezamos...

Muchas veces vemos paginas en que nos encontramos con tablas con las esquinas redondeadas. Pues esto se hace de una forma muy sencilla mira:
En la teoría:

El truco consiste en crear 4 imágenes pequeñas (20x20 pixeles aprox.) que se ponen en las esquinas de la tabla. Con esto es con lo que se le da un aspecto más ovalado a la tabla.

En la práctica:

Creamos una tabla por ejemplo 3x3:

Primero, y antes de todo, tenemos que tener muy claro el color exacto del fondo de la página, y el color de fondo de la propia tabla. Para mayor precisión con el color, lo manejaremos en hexadecimal.

En este ejemplo utilizaremos como color de la tabla el Naranja I (#FF9933)

A continuación con cualquier programa de diseño realizamos la siguiente imagen:

Programas que puedes utilizar: Photoshop, Ulead PhotoImpact, Corel draw, Freehand...

La imagen que se debe realizar es:

1 imagen de tamaño 20x20 pixeles que sea 1/4 de circunferencia cuyo color del relleno sea el mismo que el de la tabla. El color de fondo de la imagen (es decir, a parte restante del 1/4 de circulo) será transparente (sin color)

Con la práctica se ve mejor:
Comprueba como la parte que se deja transparente, deja traspasar el color de la tabla.
Observa varios ejemplo con la misma imagen:

Muy Importante: a continuación haremos cuatro copias, con 4 nombres diferentes,

 

La primera copia la dejaremos tal cual: esquina1.gif
La segunda copia la rotaremos 90 grados, de forma que quede así: esquina2.gif
La tercera copia la rotaremos 180 grados, de forma que quede así: esquina3.gif
La cuarta copia la rotaremos 270 grados, de forma que quede así: esquina4.gif

Crearemos una tabla de 3x3 (celdasxcolumnas) e insertaremos las imágenes anteriormente creadas.

Realizamos ciertos retoques en la tabla:

Bordes a cero. Márgenes de celdas a cero. Espacio entre celdas a cero:
<table cellSpacing="0" cellPadding="0" width="xxx" border="0">

Le ponemos a la tabla su color de fondo:

	Aquí su contenido

A continuación se muestra un ejemplo, en el que el fondo de página es un color naranja algo saturado que el color utilizado en la tabla. En este caso, en lugar de poner el fondo de las imágenes como "transparente" se ha utilizado directamente el color que se iba a utilizar como fondo de la web

Espero que la información le haya sido de utilidad.
Para ponerse en contacto, acceda a la Zona de contacto.

Artículo redactado y elaborado por el equipo de Desenredate.com

---------