Product Comparison & Pricing Table using CSS3

If you are involved in any business having multiple products, then Pricing Tables will play a important role in your company that simply differentiate the product features & prices in a comparison table.

A elegant Pricing Table will help visitors / buyers to choose the best product for them.

Here we are going to see how to design a simple pricing comparison table using CSS3 & html table tag.

This code is completely customizable 🙂 So you can easily modify the colors, style & typography etc

CSS3 Code

.table {overflow-x: auto;}

table.pricing th {padding: 10px 0; color: #999; font: 300 1.154em/3em sans-serif; text-align: center;}

table.pricing strong {color: #3f3f3f; font-size: 2em;}

table.pricing sup {position: relative; top: -0.5em; color: #3f3f3f; font-size: 1.2em;}

table.pricing td {color: #3f3f3f; text-align: center;}

table.pricing td:first-child {color: #999; text-align: left;}

table.pricing td:nth-child(2n+2) {background: #f7f7f7;}

table.pricing tr.action td {padding: 20px 10px; border-bottom-width: 2px;}

table.pricing tr.action td:first-child a {padding-left: 20px; background: url("more.png") 0 50% no-repeat; color: #3f3f3f;}

table.pricing tr.action td:first-child a:hover {color: #ff8400;}

table.pricing span.yes {display: block; overflow: hidden; width: 18px; height: 18px; margin: 0 auto; background: url("msg-success.png") 50% 50% no-repeat; text-indent: -50em;}

table.pricing span.no {display: block; overflow: hidden; width: 18px; height: 18px; margin: 0 auto; background: url("no.png") 50% 50% no-repeat; text-indent: -50em;}

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo & Download

Download Script will be available for subscribed members only. If you want this script, please subscribe to my blog and tell me the reason via comment that why do you love this Table