Crear una bonita tabla usando divs y CSS

El tutorial de hoy va a estar un poco intenso, vamos a hacer un diseño de tabla usando divs, porque una opción más confiable y lógica es hacer una tabla usando el elemento table, pero la verdad no me permite crear del todo un buen diseño, aunque no es malo he de decir.

Entonces, lo que vamos a hacer es un pequeño diseño de tabla muy llamativo en el que como van a ver es más la ilusión óptica de las imágenes la que da la ilusión del diseño, lo demás es acomodar los elementos con un poco de CSS

Nivel: intermedios/avanzados

Descargar ejemplo

Resultado final

Creando la estructura HTML

Les cuento rápido la estructura de esta tabla. Lo primero que hay que saver es que los estilos de las sombras, y la columna más oscura es una imagen, es decir, el fondo está hecho en algún programa como Photoshop, para dar la apariencia de tabla, por lo que el verdadero trabajo es construir sobre la imagen nuestra información.

Como ven el código es bastante largo, pero es muy simple de entender. Primero tenemos nuestro contenedor llamado pricing, y cada tabla o columna tiene un código general, es decir, es pura repetición. Cada columna está compuesta por:

Hay un contenedor que alberga la columna, dentro de ella tenemos una capa de detalles, donde incluiremos nuestra primer información como un título y una descripción de lo que trata. Después tenemos una lista donde aparece otra descripción, de hecho se ve en la imagen final que hay una separación, es ahi donde termina la primera capa y empieza la lista. Y por último está un botón en caso de que queramos elegir esa opción, lo ven, fácil.

Hay que fijarse muy bien porque cada columna está marcada con una clase diferente, está la pricing first, pricing featured(la que resalta más), pricing third, pricing fourth, y pricing fifth.

Entonces, si tenemos todo bien hecho, tendremos algo como esto:

Dando forma con CSS

CSS nos va a ayudar a darle la forma a nuestra tabla de elección, por lo que tenemos que incluir este código:

Este código también luce muy grande, pero si se dan cuenta sólo van definiendo los estilos de columna por columna. Como expliqué en el HTML, cada columna tiene sus propias capas y estilos, entonces se tienen que configurar las posiciones para cada columna, y todo el estilo para la segunda, lo demás es más generalizado.

Algo más, el botón que aparece es también una imagen, es un spry para ser más exacto, entonces cuando se aplique un :hover se moverá el fondo para mostrar la otra imagen.

Si aplican bien el código van a ver que ya tenemos nuestra tabla:

Y nuestro código final sería este: