Diseña tu tabla de precios con HTML y CSS

05 oct Tricks

Diseña tu tabla de precios con HTML y CSS

Vamos a crear una tabla de precios y buscaremos resaltar una columna en especifico, esto para dar la idea que de todos los servicios que ofrecemos el mas importantes es el que esta resaltado, estos tipos de tablas se pueden usar en diferentes ejemplos, pero principalmente son utilizados para mostrar paquetes o planes de algún tipo de servicio

Comenzamos por generar nuestra imagen, en este caso nosotros ya la tenemos definida, es una tabla de precios que vamos a diseñar para el portal Teko Estudio.

Ahora necesitamos exportar las imágenes necesarias para nuestra tabla, nuestra carpeta “images” debe de contener los siguientes archivos.

En este caso en particular se exportaron como “.png” para respetar las transparencia y poder ser consistentes con el diseño.

Código HTML

Para nuestro código HTML, diseñaremos cada una de las tablas, nuestro código quedara de la siguiente manera:


                <!-- Comienza plan -->

                <div class="column">

                    <div class="titprice">
                        <h2>Uno</h2>
                   	</div>

                    <div class="price">
                        <h3>3,000</h3>
                        <p class="small">Pago único</p>
                    </div>

                    <ul class="detalles">
                        <li>Diseño PSD (photoshop)</li>
                        <li>HTML &amp; CSS</li>
                        <li>1 página</li>
                        <li>Formulario Contacto</li>
                        <li>Implementación Jquery</li>
                        <li>Wordpress (CMS)</li>
                        <li>Google Analitycs</li>
                    </ul>

                    <p>
                        <a href="#" class="orange"><span>Solicitar</span></a>
                    </p>

                </div> 

                <!-- Termina Plan -->

Este tutorial esta diseñado para personas con niveles básicos de HTML y CSS, si estas atorado en esta parte, quiere decir que necesitas revisar un poco las bases de continuar

El código que utilice esta muy simple, tenemos un div llamado “column” que es el que encierra toda nuestra información, adentro de de este tenemos 4 secciones más, la primera es el titulo del producto, la segunda es el precio y una leyenda de “pago único”, en la tercera sección tenemos los detalles del tipo de plan, este esta a manera de lista desordenada y cada elemento “li” nos muestra un detalle de nuestra tabla de precios y por utlimo contamos con un párrafo el cual encierra nuestro botón.

Ya que tenemos nuestra primera columna solo debemos de copiar y pegar este código para crear el numero de paquete o planes que necesitemos, en el caso del precio principal nuestro código tiene algunas pequeñas variantes, que mencionare a continuación.


                <!-- Comienza plan -->

                <div class="columnp">

                    <div class="titprice">
                        <h2>W Prime</h2>
                       </div>

                    <div class="price">
                        <h3>$3,000</h3>
                        <p class="small">Pago único</p>
                    </div>

                    <ul class="detalles">
                        <li>Diseño PSD (photoshop)</li>
                        <li>HTML &amp; CSS</li>
                        <li>1 página</li>
                        <li>Formulario Contacto</li>
                        <li>Implementación Jquery</li>
                        <li>Wordpress (CMS)</li>
                        <li>Google Analitycs</li>
                    </ul>

                    <p>
                        <a href="#" class="blue"><span>Solicitar</span></a>
                    </p>

                </div> 

                <!-- Termina Plan -->

Como pueden ver en el código anterior lo único que cambia son dos clases, la clase “orange” y “column”. La clase orange la sustituimos por “blue” para poder dar un color de botón diferente en el precio, y la clase column ha sido modificada por “columnp” para poder cambiar el fondo de la columna principal.

Ahora que ya tenemos nuestro código HTML podemos comenzar con la magia del CSS

CSS de nuestra tabla de precios

Lo primero que vamos a hacer, es darle estilo a nuestra clases.


    .column {
        background:url(images/tabla_normal.png) no-repeat; /*Definimos el fondo de nuestra columna*/
        width:169px; height:313px; /*Definimos las proporciones alto y ancho para la columna*/
        float:left; /*flotamos a la izquierda para generar el contenido en horizontal*/
        }

    .columnp {
        background:url(images/tabla_principal.png) no-repeat; /*Definimos el fondo de nuestra columna*/
        width:174px; height:317px; /*Definimos las proporciones alto y ancho para la columna*/
        float:left;
        }

    .columnp, .column {
        margin:0 4px 0 0;
        padding: 10px;
        }

    .titprice {
        padding:0 0 10px 0;
        font-size:20px;
        }

    .titprice, .price, .detalles {
        text-align:center;
        border-bottom:#d2d2d2 solid 1px;/*Borde que separa los contenidos*/
        }

    .price {
        padding:10px 0 10px 0;
        }

    .price h3 {
        font-size:38px;
        text-align:center;
        color:#000000;
        font-weight:bold;
        letter-spacing:-1px; /*Reducimos el espacio entre cada letra*/
        }

    .price p.pagounico {
        font-size:10px;
        margin:0 0 10px 0;
        }

    .detalles {
        margin:10px 0 10px 0;
        padding:0 0 5px 0;
        }

    .detalles li {
        margin:0 0 5px 0;
        list-style:none;
        }

    .orange { /*Aqui comienza el css sprite*/
        background:url(images/botones.png) no-repeat;
        width:167px;
        height:46px;
        display:block;
        text-indent:-99999px;
        }

    .blue { /*Aqui comienza el css sprite*/
        background:url(images/botones.png) no-repeat bottom;
        width:167px;
        height:46px;
        display:block;
        text-indent:-99999px;
        }

Clase column y columnp, con estas definimos el fondo y tamaño de cada una de nuestras columnas.

Con la clase titprice y price determinamos el tamaño de letra para nuestro producto y precio, al mismo tiempo definimos que forma y espacios va a tener nuestra lista desordenada, esta la modificamos por medio de la clase detalles.

Y por ultimo solo tenemos que hacer un CSS Sprite para agregar nuestros botones.

Recuerden que la clases colump y blue son las que le dan formato a nuestro precio principal

Tips & Tricks