How to Create a Pricing Table with HTML and CSS

April 9, 2025 by Dev Junior

If you’re building a landing page or a SaaS product website, a pricing table is a common UI element used to display your plans clearly and visually.

In this beginner-friendly tutorial, you’ll learn how to build a simple, clean, and responsive pricing table using only HTML and CSS.

👁️ Preview

🧱 Step 1: HTML Structure for the Pricing Table

We’ll create a three-column layout: Basic, Pro, and Premium plans.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pricing Table</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <section class="pricing-table">
    <div class="plan">
      <h2>Basic</h2>
      <p class="price">$9/mo</p>
      <ul>
        <li>1 Website</li>
        <li>10GB Storage</li>
        <li>Email Support</li>
      </ul>
      <a href="#" class="btn">Choose</a>
    </div>

    <div class="plan featured">
      <h2>Pro</h2>
      <p class="price">$29/mo</p>
      <ul>
        <li>10 Websites</li>
        <li>100GB Storage</li>
        <li>Priority Support</li>
      </ul>
      <a href="#" class="btn">Choose</a>
    </div>

    <div class="plan">
      <h2>Premium</h2>
      <p class="price">$99/mo</p>
      <ul>
        <li>Unlimited Websites</li>
        <li>1TB Storage</li>
        <li>24/7 Support</li>
      </ul>
      <a href="#" class="btn">Choose</a>
    </div>
  </section>

</body>
</html>

🎨 Step 2: Style the Pricing Table with CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 2rem;
}

.pricing-table {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.plan {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 280px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.plan h2 {
  font-size: 1.5rem;
  color: #333;
}

.plan .price {
  font-size: 2rem;
  color: #7179F4;
  margin: 1rem 0;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.plan ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.plan .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #7179F4;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.plan .btn:hover {
  background-color: #525174;
}

.featured {
  border: 2px solid #7179F4;
  transform: scale(1.05);
}

🧠 Explanation

.pricing-table: Flexbox is used to create a responsive layout.
.plan: Each pricing box is styled individually.
.featured: Highlights the “Pro” plan to draw user attention.
Uses brand colors: #7179F4 and #525174.

You can customize the number of features, plans, and styles to fit your needs.

✅ Final Result

You now have a modern, responsive pricing table built with:

✅ Clean HTML structure
✅ Flexbox layout
✅ Fully customizable design
✅ No frameworks or libraries

🧩 Bonus Tips

Add media queries to stack columns on mobile
Use icons for each feature (e.g., with Phosphor or FontAwesome)
Integrate with Stripe or PayPal buttons for payments

Leave a Comment Cancel reply