EspañolPricing table for websites (plans in HTML and CSS)
Write the plans in the box: a line with the name and prices, and the items below it. Mark the featured plan with * before its name.
How to usePlans side by side, with the best one featured
Available in: 
Pricing table for websites (plans in HTML and CSS): what it is for
A well-built plans section helps visitors compare and choose. Write each plan with its name, monthly price, yearly price, button and the included (+) and not included (-) items, and mark the featured one with an asterisk.
The code is responsive, with the featured plan slightly raised and badged, included and not included icons (with text for screen readers) and a monthly/yearly toggle made with CSS and radio buttons only. Adjust the color, the currency and the badge text.
How to use
- Write the plans and the items.
- Mark the featured plan and adjust the colors.
- Copy the code.
When to use it
- Subscription plans.
- Service packages.
- Gym or course plans.
Frequently asked questions
How do I write the plans?
Each plan starts with a line 'Name | monthly price | yearly price | button text | link'. The following lines, starting with + or -, are the included and not included items. Leave a blank line between plans. Put * before the name of the plan that should be featured.
How does the monthly/yearly toggle work?
If you fill in the yearly price, a toggle appears so visitors can switch. It works with CSS and radio buttons, with no JavaScript, and both prices are in the HTML.
How many plans should I show?
Three is the most common number: the middle one, featured, is usually the most chosen. With more than four, comparing gets hard; in that case, a comparison table works better.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.