Pricing Table Generator

Build a clear comparison table for products or subscriptions. The generator handles two to four plans, recurring-price labels, feature availability and one optional highlighted plan.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-box"><p>per month</p><div class="stg-grid"><article class="stg-card"><h3>Starter</h3><p><strong>19</strong> per month</p><ul><li>✓ One project</li><li>✓ Email support</li><li>✕ Team access</li></ul><a href="https://example.com/" rel="noopener noreferrer">Learn more</a></article><article class="stg-card"><p>Popular</p><h3>Team</h3><p><strong>49</strong> per month</p><ul><li>✓ Unlimited projects</li><li>✓ Priority support</li><li>✓ Team access</li></ul><a href="https://example.com/" rel="noopener noreferrer">Learn more</a></article></div></section></body></html>

What this generator does

2–4 plan columns.
Monthly/yearly label text without fake calculations.
Feature rows with included/not-included states.
Optional popular/recommended badge.

How to use

Add plan names and accurate prices.
Add comparable features in the same order.
Choose at most one highlighted plan.
Configure button labels and URLs.
Preview mobile stacking and copy the code.

Best practices

Do not use misleading crossed-out prices unless they are genuine.
Make differences understandable without relying on color alone.

Frequently asked questions

Can I create a free plan?

Yes. Enter Free or 0 as the display price.

Does the generator process payments?

No. It creates presentation markup only; CTA links can point to your real checkout.

Related tools & guides

Hero Section Generator

Design a responsive landing-page hero with headline, supporting text, CTA buttons, image or gradient background and copyable HTML/CSS.

Testimonial Slider Generator

Build a responsive testimonial slider with names, roles, photos, ratings and keyboard controls. Copy lightweight HTML, CSS and JavaScript.

Countdown Timer Generator

Create a responsive countdown timer for launches, events or deadlines. Set the target time, labels, style and completion behavior, then copy the code.