Pricing Table Generator

Pricing Table Generator builds the plans section of a pricing page without a page builder or a framework. Add up to five plans, give each a name, a short description, a monthly price, a button and an optional badge, then list your features with a tick, a cross or a short value such as “50 GB” for every plan. Mark one plan as most popular and it is lifted out with your accent colour.

Turn on the monthly/yearly switch, set a discount, and the yearly prices are worked out for you, shown either as a monthly equivalent (“billed yearly”) or as the full year’s price, rounded to whole numbers, cents or a .99 charm price. The switch works in the code you copy too, with a short script of a few lines and nothing else.

Pick one of seven styles (Cards, Minimal, Bold, Dark glow, Soft, Outline or a full comparison table), then your own colours, font and corner rounding. The preview is the exact exported code, and you can view it at desktop width or in a 390-pixel phone frame. The table adapts to the space it is placed in, so it also stacks neatly inside a narrow column. Everything is made in your browser.

1. Under “Plans”, edit the three example plans, or press “Add plan” (up to five). Tick “Highlight as most popular” on the one you want to stand out.
2. Under “Feature rows”, name each feature and set every plan to ✓ Yes, ✕ No or Text… for a value like “Up to 10”.
3. In “Heading and billing”, write your heading, keep or turn off the monthly/yearly switch, set the yearly discount, currency and rounding.
4. Pick a style, then adjust the accent, background and text colours, the font and the corner rounding. Switch the preview between Desktop and Phone.
5. Choose “HTML + CSS” or “Tailwind” and press “Copy all”, or “Download .html” for a ready-to-open page.

• 1 to 5 plans, each with name, description, monthly price, button text and link, and an optional badge
• Up to 20 feature rows with ✓ included, ✕ not included or your own short text per plan
• One “most popular” plan highlighted in your accent colour
• Monthly/yearly switch with a discount from 0 to 90%, yearly shown per month or per year, three rounding choices
• Seven styles, including a comparison table with a sticky feature column
• Your own accent, background and text colours, with warnings when text would be hard to read
• Six font choices (or your website’s own font) and adjustable corner rounding
• Live preview at desktop width or in a 390-pixel phone frame
• Clean HTML and CSS with no framework, or a Tailwind CSS version; copy all, HTML, CSS or script, or download a .html page
• Accessible markup: real buttons for the switch, screen-reader text for ticks and crosses, visible focus rings

• Three plans is the classic layout: people compare the middle one with its neighbours, so highlight the plan you want most people to choose.
• Keep feature names short and put the most important differences at the top of the list.
• Set the yearly discount to what you really charge. The figure in the “Save” label comes straight from the discount box.
• The CSS class names all start with “pt-”, so they will not clash with your site’s own styles.
• Phone layouts rely on CSS container queries, which every current browser supports; very old browsers show the desktop layout instead.