A pricing table is a component commonly used on websites to display the various plans or services offered, with their respective prices and features. These tables are often found on websites that provide subscription services, SaaS products, or e-commerce platforms.
A typical pricing table has columns for each plan and rows outlining features, allowing users to compare and choose the best plan that fits their needs.
Step 01: HTML Structure for Pricing Table
Let’s start by setting up the basic HTML structure. Below is an example with three pricing plans: Basic, Standard, and Team.
✲ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Cards | Coding Zemigle</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<input type="radio" name="slider" id="tab-1">
<input type="radio" name="slider" id="tab-2" checked>
<input type="radio" name="slider" id="tab-3">
<header>
<label for="tab-1" class="tab-1">Basic</label>
<label for="tab-2" class="tab-2">Standard</label>
<label for="tab-3" class="tab-3">Team</label>
<div class="slider"></div>
</header>
<div class="card-area">
<div class="cards">
<div class="row row-1">
<div class="price-details">
<span class="price">99</span>
<p>For beginner use</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>100 GB Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 50+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>One FREE Domain Registration .com and .in extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">149</span>
<p>For professional use</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>500 GB Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 200+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>Five FREE Domain Registration .com and .in extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">199</span>
<p>For team collaboration</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>Unlimited Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 500+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>Two FREE Domain Registration .com and .in extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
</div>
</div>
<button>Get Started</button>
</div>
</body>
</html>We have three pricing columns, each representing a different plan.
Each column contains a heading for the plan name, a price, a list of features, and a call-to-action button.
The structure is simple and clean, making it easy to style.
Step 02: CSS Styling for the Table
Now, let's move on to the CSS. We will style the pricing table to make it visually appealing and easy to read.
✲ style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#26a1ea, #5739dc);
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.wrapper header{
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative;
}
header label{
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 18px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3{
color: #fff;
}
header label:nth-child(2){
width: 40%;
}
header .slider{
position: absolute;
height: 85%;
border-radius: inherit;
background: linear-gradient(#26a1ea, #5739dc);
transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider{
left: 0%;
width: 90px;
transform: translateX(5%);
}
#tab-2:checked ~ header .slider{
left: 50%;
width: 120px;
transform: translateX(-50%);
}
#tab-3:checked ~ header .slider{
left: 100%;
width: 95px;
transform: translateX(-105%);
}
.wrapper input[type="radio"]{
display: none;
}
.card-area{
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 300%;
}
.cards .row{
width: 33.4%;
}
.cards .row-1{
transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1{
margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1{
margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1{
margin-left: -66.8%;
}
.row .price-details{
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6;
}
.price-details .price{
font-size: 65px;
font-weight: 600;
position: relative;
font-family: 'Poppins', sans-serif;
}
.price-details .price::before,
.price-details .price::after{
position: absolute;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.price-details .price::before{
content: "$";
left: -13px;
top: 17px;
font-size: 20px;
}
.price-details .price::after{
content: "/mon";
right: -33px;
bottom: 17px;
font-size: 13px;
}
.price-details p{
font-size: 18px;
margin-top: 5px;
}
.row .features li{
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 20px;
align-items: center;
}
.features li i{
background: linear-gradient(#26a1ea, #5739dc);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.features li span{
margin-left: 10px;
}
.wrapper button{
width: 100%;
border-radius: 25px;
border: none;
outline: none;
height: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
margin-top: 20px;
background: linear-gradient(#26a1ea, #5739dc);
transition: transform 0.3s ease;
}
.wrapper button:hover{
transform: scale(0.98);
}We use flexbox to align the pricing columns horizontally and center them on the page.
The .pricing-column class styles each column with a white background, some padding, and a subtle border.
We’ve also added a special style for the "Standard" plan by assigning it the .popular class, which highlights the most recommended plan.
The buttons are styled with a green background, but the popular plan's button has a blue background to make it stand out.
Conclusion
Creating a responsive pricing table using HTML and CSS is a straightforward process, but it’s essential to ensure that your table is visually appealing, easy to navigate, and functional on all devices. By following the steps outlined in this guide, you can design a pricing table that not only looks great but also helps users quickly compare pricing options and make informed decisions.
Remember to test your table on various devices and browsers to ensure it performs well everywhere. With these tips, you can create a professional pricing table that enhances the user experience on your website.