Learn how to create a responsive pricing table with CSS.
- $ 9.99 / year
- 10GB Storage
- 10 Emails
- 10 Domains
- 1GB Bandwidth
- Sign Up
- $ 24.99 / year
- 25GB Storage
- 25 Emails
- 25 Domains
- 2GB Bandwidth
- Sign Up
- $ 49.99 / year
- 50GB Storage
- 50 Emails
- 50 Domains
- 5GB Bandwidth
- Sign
Up
Try it Yourself »
How To Create a Responsive Pricing TableStep 1) Add HTML:Example<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 9.99 / year</li>
<li>10GB
Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
Step 2) Add CSS:Example * {
box-sizing: border-box;
} /* Create three columns of equal width
*/
.columns {
float: left;
width: 33.3%;
padding: 8px;
} /* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
} /* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
} /* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
} /* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
} /* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
} /* The "Sign Up" button */
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
} /* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
} Try it Yourself »
Nowadays, every website contains pricing tables, such as e-commerce, e-tech, and even tourism websites also have pricing tables as they contain their plans, cost of plans, and information about plans to buy new facilities. So the pricing table is one of the most important parts of websites which sell something. In this article, we are creating a beautiful pricing table with the help of pure HTML and CSS coding. This coding includes two files, one for HTML code saved with the extension
.html and the other for CSS code saved with the extension .css. Approach: First we will create basic structure of pricing table using HTML tags and then apply some CSS properties on it to make it more attractive. HTML Code: HTML<!DOCTYPE html>
<html>
<head>
<title>
Pricing Table using HTML and CSS
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Select Your Plan</h2>
<div class="price-row">
<div class="price-col">
<p>Basic</p>
<h3>500 Rs <span>/month</span></h3>
<ul>
<li>C programming basic</li>
<li>Variables in c</li>
<li>Function in c</li>
<li>Basic programs in c</li>
</ul>
<button>Buy Now</button>
</div>
<div class="price-col">
<p>Standard</p>
<h3>1000 Rs <span>/month</span></h3>
<ul>
<li>Algorithms in c</li>
<li>Data structures in c</li>
<li>Medium+hard level programs</li>
<li>High quality study material</li>
</ul>
<button>Buy Now</button>
</div>
<div
class="price-col">
<p>Premium</p>
<h3>1200 Rs <span>/month</span></h3>
<ul>
<li>C programming basic</li>
<li>Algorithms in c</li>
<li>Data structures in c</li>
<li>All level programs</li>
</ul>
<button>Buy Now</button>
</div>
</div>
</div>
</body>
</html>
CSS Code: style.css*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.container{
width: 100%;
min-height: 100vh;
background: #90EE90;
}
.container h2{
color: #000000;
font-size:32px;
padding:50px 0;
text-align: center;
}
.price-row{
width: 90%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 25px;
}
.price-col{
background: #006400;
padding: 10% 15%;
border-radius: 10px;
color: #fff;
text-align: center;
}
.price-col p{
font-size: 22px;
}
.price-col h3{
font-size: 44px;
margin: 20px 0 40px;
font-weight: 500;
}
.price-col h3 span{
font-size: 16px;
}
.price-col ul{
text-align: left;
margin: 20px 0;
color: #ddd;
}
.price-col ul li{
margin: 15px 0;
size: 20px;
}
.price-col button{
width: 100%;
padding: 14px 0;
background: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #fff;
border-radius: 6px;
cursor: pointer;
transition: background 0.5s;
}
.price-col button:hover{
background: #008000;
}
Output:
How do you add a price tag in HTML?
Example. /* Create three columns of equal width */ .columns { float: left; ... . /* Style the list */ .price { list-style-type: none; ... . /* Pricing header */ .price .header { background-color: #111; ... . /* List items */ .price li { border-bottom: 1px solid #eee; ... . /* Grey list item */ .price .grey { ... . /* The "Sign Up" button */ .button {. How do you make a price table?
Things To Consider Before Designing A Pricing Table For Your Elementor Website. Limit Your Plan to 3-4 Options. ... . Keep the Table Simple. ... . Choose Appropriate Package Names. ... . Highlight the Best Deal. ... . Create Urgency or FOMO. ... . Use Smart Price Anchoring. ... . Use Visual Elements to Emphasize, Not Distract. ... . Make Your CTA Noticeable.. | 
