HTML Template with Pricing Table 2026

3-Tier Pricing Table — HTML Code

/* ── Pricing Grid ──────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 900px; margin: 0 auto;
}
.pricing-card {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 28px;
}
/* Highlighted / recommended plan */
.pricing-card.featured {
  border-color: #a78bfa;
  background: rgba(167,139,250,.08);
  transform: scale(1.03);
}
.price {
  font-size: 48px; font-weight: 800;
  color: #a78bfa;
}
@media (max-width:768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; order: -1; }
}

Annual / Monthly Toggle — 5 Lines of JS

// Pricing toggle — no jQuery needed
const toggle = document.querySelector('.price-toggle');
const prices = document.querySelectorAll('[data-monthly]');
toggle.addEventListener('change', () => {
  prices.forEach(el => {
    el.textContent = toggle.checked
      ? el.dataset.annual
      : el.dataset.monthly;
  });
});

Pricing Table Conversion Best Practices

3 tiers maximum — more options cause analysis paralysis, reducing conversions
Highlight the middle plan visually — scale(1.03), accent border, "Most Popular" badge
Annual discount 20–40% — anchor annual pricing to improve LTV and reduce churn
Show annual price as "per month" — $99/month (billed $1,188/year) reduces sticker shock
Feature checklist with ✓ and ✗ — clearly shows what each tier includes/excludes
Money-back guarantee below CTA — "30-day money-back guarantee, no questions asked"
Enterprise "Contact us" as 4th option if needed — keeps SMB tiers uncluttered

Pricing Psychology That Converts

Anchoring

Show the Expensive Plan First

Display tiers right-to-left (Enterprise → Pro → Starter). The expensive plan anchors perception — the middle plan looks reasonable by comparison.

Save X%

Annual Badge on Toggle

Show "Save 33%" badge next to "Annual" toggle option. The savings number is more persuasive than showing the lower monthly equivalent alone.

Free Trial

CTA: Start Free Trial

"Start Free Trial" outperforms "Buy Now" or "Subscribe" for SaaS by 15–30%. Reduces perceived risk and increases top-of-funnel conversion.

Per User

Show Total vs Per-User

For per-seat pricing, show per-user cost prominently (lower number) and total below. "$12/user/month" converts better than "$120/month for 10 users."

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I create a pricing table in HTML and CSS?

3-column CSS grid: `display:grid; grid-template-columns: repeat(3,1fr); gap:20px`. Each card is a div with plan name, price, feature checklist, and CTA button. Highlight the recommended plan with an accent border and slight scale transform. Stack to single column on mobile with `@media(max-width:768px){grid-template-columns:1fr}`.

How do I make a pricing toggle in HTML?

HTML: ` Annual (Save 33%)`. JavaScript: 5 lines — listen for `change` event on the checkbox, loop through all price elements, toggle between `data-monthly` and `data-annual` attribute values. No jQuery required. See the full code above.

What is the best pricing table design?

Best-converting pricing table: 3 tiers (Starter/Pro/Enterprise), middle plan highlighted with accent border and 'Most Popular' badge, annual/monthly toggle with 'Save X%' badge, feature checklist with ✓ and ✗ per tier, money-back guarantee below CTA, and a trust line ('Join 5,000+ teams'). The highlighted middle plan typically gets 60–70% of all plan selections.

How many pricing tiers should I have?

3 tiers is the conversion-optimal number. 2 tiers: limits upsell opportunity. 3 tiers: anchors the middle plan as the 'sensible choice.' 4+ tiers: creates decision paralysis and reduces conversion rate. Exception: add a 4th 'Enterprise — Contact us' option when you genuinely sell to enterprise buyers, but keep it out of the visual pricing table.

How do I highlight the recommended pricing plan in HTML?

CSS: add a `.featured` class to the recommended card. Style with: `border-color: #a78bfa; background: rgba(167,139,250,.08); transform: scale(1.03)`. Add a 'Most Popular' badge inside the card with absolute positioning. On mobile (768px breakpoint), remove the transform and use `order: -1` to show the featured plan first in the stacked layout.