Cómo diseñar una tabla de precios (HTML y CSS)

¡Buenos días! En este vídeo-tutorial os enseño cómo diseñar una tabla de precios con HTML y CSS, sin tener que usar ningún tipo de plugins. ¡Vamos allá!

Como véis para crear una tabla de precios sólo se necesitan unos conocimientos básicos de HTML y CSS.

A continuación os dejo el código que he utilizado en el vídeo que podéis copiar y modificar a vuestro gusto.

Estructura HTML de una tabla de precios

<div id="tabla-precios">

<div class="precio-col">
 <div class="precio-col-header">
 <h3>15€/mes</h3>
 <p>para principiantes</p>
 </div>

<div class="precio-col-features">
 <p>Característica 1</p>
 <p>Característica 2</p>
 <p>Característica 3</p>
 </div>

<div class="precio-col-comprar">
 <a>Comprar</a>
 </div>
 </div>

<div class="precio-col">
 <div class="precio-col-header">
 <h3>30€/mes</h3>
 <p>para avanzados</p>
 </div>

<div class="precio-col-features">
 <p>Característica 1</p>
 <p>Característica 2</p>
 <p>Característica 3</p>
 </div>

<div class="precio-col-comprar">
 <a>Comprar</a>
 </div>
 </div>

<div class="precio-col">
 <div class="precio-col-header">
 <h3>50€/mes</h3>
 <p>para profesionales</p>
 </div>

<div class="precio-col-features">
 <p>Característica 1</p>
 <p>Característica 2</p>
 <p>Característica 3</p>
 </div>

<div class="precio-col-comprar">
 <a href="https://pro.empresiona.com">Comprar</a>
 </div>
 </div>

</div>

Código CSS de una tabla de precios

#tabla-precios {
 display:inline-block;
 width:100%;
 margin-top:50px
}

/*Columnas*/

.precio-col {
 display:inline-block;
 background-color:#f3f3f3;
 width:100%;
 max-width:500px;
 border-radius:10px;
 margin-bottom:50px;
 box-shadow: 0px 2px 5px #ddd
}

@media screen and (min-width:768px) {
 .precio-col {
 width:32%;
 float:left;
 margin-right:2%
 }
 
 .precio-col:last-child {
 margin-right:0
 }
}

/*Headers*/

.precio-col-header {
 background-color:#333;
 padding:20px;
 border-top-left-radius:10px;
 border-top-right-radius:10px
}

.precio-col:nth-child(2) .precio-col-header {
 background-color:#dd9933
}

.precio-col-header h3 {
 color:#f3f3f3;
 text-align:center;
 font-size:30px;
 font-weight:600;
 margin-bottom:0
}

.precio-col-header p {
 text-align:center;
 color:#f3f3f3;
 font-size:14px;
 margin-bottom:0
}

/*Características*/

.precio-col-features {
 padding: 0 20px 20px 20px
}

.precio-col-features p {
 padding:20px 0;
 margin:0;
 text-align:center;
 border-top:1px solid #ddd
}

.precio-col-features p:first-child,
.precio-col-features p:last-child {
 border-top:none
}

/*Comprar*/

.precio-col-comprar {
 padding:10px;
 max-width:250px;
 text-align:center;
 background-color:#dd9933;
 margin: 0 auto 20px;
 border-radius:10px;
 border: 2px solid #dd9933;
 transition: all 0.3s
}

.precio-col-comprar a {
 color:#f3f3f3;
 padding:10px;
 font-size:20px;
 text-transform:uppercase;
 transition: all 0.3s
}

.precio-col-comprar:hover {
 background-color:#f3f3f3;
 transition: all 0.3s
}

.precio-col-comprar:hover a {
 color:#dd9933;
 transition: all 0.3s
}