How to create pricing table in css

CssHow-ToBeginner · 4 min read

How to Create a Pricing Table in CSS: Simple Steps and Example

To create a pricing table in CSS, use div containers styled with flexbox or grid for layout, add headings, prices, and feature lists inside each container, and style with borders, background colors, and spacing. Use semantic HTML and CSS properties like border-radius, box-shadow, and :hover effects to make it visually appealing.

📐

Syntax

A pricing table is built using HTML containers like div for each pricing option. CSS uses display: flex; or display: grid; on the parent container to arrange the pricing cards side by side. Each card includes a title, price, features list, and a call-to-action button. CSS styles add borders, background colors, padding, and hover effects for clarity and interactivity.

.pricing-table: The main container holding all pricing cards.
.pricing-card: Each individual pricing option box.
flexbox/grid: Layout method to align cards horizontally.
padding, margin: Space inside and outside cards.
border-radius: Rounded corners for smooth edges.
box-shadow: Subtle shadow for depth.
:hover: Style changes when mouse is over a card.

html

<div class="pricing-table">
  <div class="pricing-card">
    <h2>Basic</h2>
    <p class="price">$10/mo</p>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
    </ul>
    <button>Choose Plan</button>
  </div>
  <div class="pricing-card">
    <h2>Pro</h2>
    <p class="price">$20/mo</p>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
    <button>Choose Plan</button>
  </div>
</div>

💻

Example

This example shows a simple three-column pricing table with distinct cards for each plan. It uses flexbox for layout, clear headings, prices, feature lists, and buttons styled with colors and hover effects.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pricing Table Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    margin: 2rem;
  }
  .pricing-table {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .pricing-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1.5rem;
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
  }
  .pricing-card h2 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }
  .price {
    font-size: 2rem;
    color: #2a9d8f;
    margin: 0.5rem 0 1rem;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
  }
  ul li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
  }
  button {
    background-color: #2a9d8f;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 1rem;
  }
  button:hover {
    background-color: #21867a;
  }
  @media (max-width: 600px) {
    .pricing-table {
      flex-direction: column;
      align-items: center;
    }
    .pricing-card {
      width: 90%;
      max-width: 300px;
    }
  }
</style>
</head>
<body>
  <section class="pricing-table" aria-label="Pricing plans">
    <article class="pricing-card" tabindex="0">
      <h2>Basic</h2>
      <p class="price">$10/mo</p>
      <ul>
        <li>1 User</li>
        <li>10GB Storage</li>
        <li>Email Support</li>
      </ul>
      <button aria-label="Choose Basic plan">Choose Plan</button>
    </article>
    <article class="pricing-card" tabindex="0">
      <h2>Pro</h2>
      <p class="price">$20/mo</p>
      <ul>
        <li>5 Users</li>
        <li>50GB Storage</li>
        <li>Priority Email Support</li>
      </ul>
      <button aria-label="Choose Pro plan">Choose Plan</button>
    </article>
    <article class="pricing-card" tabindex="0">
      <h2>Enterprise</h2>
      <p class="price">$50/mo</p>
      <ul>
        <li>Unlimited Users</li>
        <li>150GB Storage</li>
        <li>Phone & Email Support</li>
      </ul>
      <button aria-label="Choose Enterprise plan">Choose Plan</button>
    </article>
  </section>
</body>
</html>

Output

A clean webpage with three side-by-side white cards labeled Basic, Pro, and Enterprise. Each card shows a price in green, a list of features, and a green button. Cards have subtle shadows and lift slightly on hover. On small screens, cards stack vertically.

⚠️

Common Pitfalls

Common mistakes when creating pricing tables include:

Using fixed widths without responsive design, causing overflow on small screens.
Not using semantic HTML elements like article or section, which hurts accessibility.
Ignoring keyboard navigation and focus styles for interactive elements.
Overusing colors or fonts, making the table look cluttered.
Not adding enough spacing or padding, making content hard to read.

Always test your pricing table on different screen sizes and with keyboard navigation.

html

<!-- Wrong: fixed width and no responsiveness -->
<div class="pricing-card" style="width:300px;">
  <!-- content -->
</div>

<!-- Right: use max-width and flex-wrap for responsiveness -->
<style>
  .pricing-table {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .pricing-card {
    flex: 1 1 250px;
    max-width: 300px;
  }
</style>

📊

Quick Reference

Layout: Use display: flex; or grid on the container for horizontal alignment.
Cards: Use border-radius, box-shadow, and padding for clean card style.
Typography: Clear headings and price styling with larger font sizes.
Buttons: Use consistent colors and hover effects for calls to action.
Accessibility: Use semantic HTML and keyboard focus styles.
Responsive: Use media queries or flexible widths to adapt on small screens.

✅

Key Takeaways

Use flexbox or grid to arrange pricing cards side by side with responsive wrapping.

Style cards with borders, shadows, padding, and hover effects for clarity and interactivity.

Use semantic HTML elements and add keyboard focus for accessibility.

Test your pricing table on different screen sizes to ensure it looks good everywhere.

Keep design simple with consistent colors, spacing, and readable fonts.