OneTaskBy Tim King · Updated
Pricing Table Builder
Side-by-Side Plans in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Pricing Table Builder works
A pricing table builder lays out every plan side by side so visitors can compare them at a glance and pick one. Type each plan's name, price, short description, features and button text on one line, highlight the plan you want most people to choose, and copy the HTML and CSS.
Most pricing pages show three or four plans. The middle plan is usually highlighted with a badge and a filled button, because people who are unsure tend to pick the option that is marked as the popular choice. Use the Highlighted plan setting to choose which card gets that treatment.
How the pricing table builder lays out plans
The plans sit in a CSS grid with repeat(auto-fit, minmax(15rem, 1fr)), so four plans sit in one
row on a wide screen, wrap to two rows on a tablet and stack on a phone without any media queries.
Each card is a flex column with the button pushed to the bottom by margin-top: auto, so the
buttons line up even when one plan lists more features than another.
Prices that are not numbers
If a price is not a number, such as Custom or Free, the builder shows it on its own without the currency symbol or billing period, which suits an enterprise plan that goes through sales.
Markup
Each plan is an <article> with a heading, so screen reader users can jump from plan to plan. The
tick before each feature is drawn by CSS with empty alternative text, so it is not read aloud on
every line.
FAQ
How many plans should a pricing table have?
Three is the most common and easiest to compare. Two works for simple products, and four is fine when the last one is a contact sales plan. More than four makes the choice harder, so move extras to a separate page.
How do I show monthly and yearly prices?
Use a billing switch that swaps the prices, like the one in the pricing toggle tool, or show the yearly price as the main figure with the monthly equivalent underneath.
Should the highlighted plan be bigger than the others?
A border, badge and filled button are usually enough. Scaling the card up can make it overlap its neighbours when the grid wraps, so if you do it, only apply it on wide screens.
How do I compare features across plans in detail?
A table of plan columns and feature rows is better for detail. Keep this card layout for the summary at the top of the page and put the full comparison table underneath it.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Comparison Card Builder
Side-by-side comparison cards with ticks, crosses and a highlighted column.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Card Builder
Design a card component and copy its HTML and CSS.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.