How to Design a Pricing Table: 7 Layout Patterns That Make Plans Easy to Compare

Most pricing pages do not lose visitors because the price is too high. They lose visitors because the comparison is too hard. When someone has to scroll up and down three times to figure out which plan includes priority support, they do not pick a plan. They close the tab.

This guide breaks down how to design a pricing table as a decision-making tool, not a decoration. You will get seven layout patterns, concrete numbers for column width and spacing, techniques to highlight the recommended plan, and a practical method for long feature lists on small screens.

What a Pricing Table Is Really Supposed to Do

A pricing table has one job: help a visitor eliminate options quickly and feel confident about the one that remains. Every design decision should be judged against that job.

Three sources of friction kill conversions on pricing pages:

Horizontal friction: the user cannot compare plans side by side because columns are too narrow, too wide, or misaligned.
Vertical friction: feature rows do not line up, so the eye has to re-anchor on every scroll.
Cognitive friction: too many plans, jargon labels, or unclear units (per user? per month? per workspace?).

Fix those three and your pricing table will outperform any amount of gradient styling.

Before You Pick a Layout: 4 Decisions to Lock In

How many plans? Two to four visible options is the practical range. Beyond four, split by audience segment instead of adding columns.
What is the pricing unit? Per seat, per month, per usage block, flat fee. Say it next to the number, not in a footnote.
What is the recommended plan? You must have one. A table without a default pushes the decision back onto the visitor.
How long is the feature list? Under 8 rows means a card layout works. Over 15 rows means you need a card layout plus a full feature matrix below it.

7 Pricing Table Layout Patterns That Reduce Comparison Friction

1. The Two-Column Binary

Two cards, usually Free vs Paid or Self-Serve vs Managed. This is the cleanest possible decision because there is nothing to weigh except “do I need more”.

Best for: freemium products, single-product tools, early-stage SaaS.
Layout rule: give each card roughly equal width (420 to 520px on desktop) and center the pair inside a container no wider than 1000px, otherwise the gap between them breaks the comparison.
Common mistake: making the free plan look sad and empty. Show what it genuinely includes, then show the upgrade trigger clearly.

2. The Classic Three-Tier (Good, Better, Best)

The default for a reason. Three columns fit comfortably above the fold on most laptops, and the middle position naturally reads as the recommendation.

Best for: SaaS, agencies, hosting, memberships.
Layout rule: 300 to 360px per card, 24 to 32px gutters, equal heights with CTA buttons aligned on the same baseline.
Anchor effect: the highest tier makes the middle tier feel reasonable. Do not remove it just because few people buy it.

3. The Four-Column Grid With a Contact Tier

Three self-serve plans plus an “Enterprise / Custom” column with no price and a “Talk to sales” CTA.

Best for: products with a real upmarket motion.
Layout rule: cards shrink to about 250 to 280px. Reduce feature rows inside cards to 5 or 6, and push the full detail into a feature matrix underneath.
Warning: four columns at 1280px viewport is already tight. Test at 1366×768, still one of the most common laptop resolutions.

4. The Feature Matrix (Full Comparison Table)

A true table: features as rows, plans as columns, check marks and values in the cells. This is the pattern buyers in evaluation mode actually want.

Best for: long feature lists, technical buyers, B2B shortlisting.
Layout rule: sticky header row with plan names and prices, zebra striping or a 1px row divider, and feature group headers (Collaboration, Security, Support) every 5 to 8 rows.
Pro move: put the cards at the top for fast deciders and the matrix below for thorough ones. Same page, two reading speeds.

5. The Billing Toggle Layout (Monthly vs Annual)

A switch above the table that swaps the displayed prices.

Best for: subscription products that want to push annual commitments.
Layout rules:
- Place the toggle directly above the cards, centered, with 32 to 48px of space below it.
- Label the savings explicitly: “Annual (save 20%)” beats a vague badge.
- Default to the option you want chosen, usually annual, but make the active state unmistakable.
- Animate the price change, do not reflow the whole card height. A jumping layout destroys trust.
Accessibility: build it as a real radio group or a button with aria-pressed, not a decorative div.

6. The Single Plan With a Usage Slider

One card, one price, and a slider or stepper for seats, contacts, API calls or storage.

Best for: usage-based pricing, infrastructure, email tools, API products.
Layout rule: show the computed total in a large, fixed position so the number never moves while the user drags. Display the unit price underneath in smaller text.
Add: a short “what you get at every tier” list so the page still answers the feature question.

7. Segmented Tabs by Audience

Tabs such as Individuals / Teams / Enterprise, each revealing its own small table.

Best for: products serving very different buyer types with different plan names.
Layout rule: maximum 3 tabs, with the most common segment preselected. Keep the card structure identical across tabs so switching feels like filtering, not navigating.
Risk: hidden content is unindexed content in the user’s mind. Only use tabs when the segments genuinely do not compete.

Which Layout Should You Use? Quick Reference

Layout	Plans	Ideal feature count	Best use case
Two-column binary	2	4 to 8	Freemium, simple tools
Three-tier cards	3	5 to 8 per card	Most SaaS and service businesses
Four-column + contact	4	5 to 6 per card	Products with a sales-led tier
Feature matrix	2 to 5	15 to 60 rows	B2B evaluation, technical buyers
Billing toggle	2 to 4	Any	Subscriptions pushing annual plans
Single plan + slider	1	6 to 10	Usage-based pricing
Segmented tabs	2 to 3 per tab	5 to 8 per card	Distinct audience types

Column Width, Spacing and Alignment: The Numbers That Matter

This is where most pricing tables quietly fail. Use these as starting values, then adjust to your type scale.

Element	Recommended value	Why
Container max width	1100 to 1240px	Keeps all columns inside one eye span
Card width (3 tiers)	300 to 360px	Fits 40 to 50 characters per feature line
Gutter between cards	24 to 32px	Separates without breaking grouping
Internal card padding	24 to 32px	Prevents the cramped spreadsheet look
Price font size	36 to 56px	The price is the anchor of the card
Feature row height	36 to 44px	Keeps rows scannable and aligned
CTA button height	44 to 52px	Meets touch target minimums

Alignment rules that do the heavy lifting

Same vertical rhythm across columns. Plan name, price, description, CTA and feature list must start at identical Y positions in every card.
Equal card heights. Use CSS grid with align-items: stretch so buttons never float at different levels.
Left-align feature text, right-align or center numeric values. Numbers compare faster when their digits line up.
Do not center long feature lists. Centered lists have ragged left edges and force the eye to re-find the start of every line.

How to Highlight the Recommended Plan Without Shouting

The highlighted plan is the single biggest conversion lever in a pricing table. Combine two or three of these, never all of them:

Scale: make the recommended card 8 to 12% taller or wider than its neighbours. Enough to notice, not enough to break the grid.
Elevation: a soft shadow or a solid 2px brand-colored border.
Badge: a short label at the top such as “Most popular”, “Best value” or “Recommended for teams”. Keep it under 3 words.
Button contrast: solid filled CTA on the highlighted plan, outline or ghost CTA on the others.
Background tint: a subtle fill (5 to 8% brand color) instead of pure white.
Specific copy: “Best for teams of 5 to 20” converts better than “Popular” because it lets people self-identify.

Position matters too. In a three-tier layout, the highlighted plan should be in the middle. In a four-column layout, put it in the second or third position, never at an edge.

Handling Long Feature Lists on Mobile

Mobile is where pricing tables fall apart, because side-by-side comparison is physically impossible on a 390px screen. Here is a hierarchy of solutions, from best to acceptable:

1. Stack the cards, but lead with the recommended one

On mobile, reorder the DOM so the recommended plan appears first, not second. Most users will never scroll past card two.

2. Collapse features into an accordion

Show the top 4 differentiating features per card, then a “See all 22 features” toggle. Keep the collapsed card under one screen height so the next plan is visible as a scroll cue.

3. Use a sticky plan selector for the feature matrix

For long matrices, let the user pick two plans to compare with a sticky dropdown pair at the top, then show only those two columns. Two columns fit on mobile. Four do not.

4. Horizontal scroll with a frozen first column

Acceptable fallback: the feature name column stays pinned while the plan columns scroll horizontally. Add a visible scroll affordance (a shadow edge or a small arrow) because many users never discover horizontal scroll on their own.

5. Write features so they differ

The fastest mobile fix is editorial, not technical. If 18 of your 22 feature rows show a check mark in every plan, move them to a “Included in every plan” block below the table and keep only the differentiating rows in the comparison. A 6-row table beats a 22-row table on every device.

Copy and Micro-Details That Remove Hesitation

Name plans by outcome or audience (Starter, Team, Business) rather than metals or gems. Nobody knows if Platinum beats Diamond.
One sentence under each plan name explaining who it is for. This does more work than five feature bullets.
Show the full cost. If you display an annual-equivalent monthly price, state “billed annually at X” in the same visual block.
Action CTAs: “Start free trial”, “Get Starter”, “Talk to sales”. Avoid identical “Buy now” buttons in every column.
Risk reducers under the buttons: no credit card required, cancel anytime, 14-day refund. Short, factual, directly below the CTA.
Currency and tax clarity. Local currency and a VAT or tax note prevent abandoned checkouts.

Accessibility and Technical Checklist

Use a real <table> with <th scope="col"> for feature matrices, and cards built from semantic HTML for the tier layout.
Never rely on color alone to mark the recommended plan. Pair it with a text badge.
Check marks need accessible text: use aria-label="Included" rather than a bare icon.
Maintain 4.5:1 contrast for price text, including on tinted highlight cards.
Ensure keyboard focus order moves plan by plan, left to right.
Do not load the billing toggle state via JavaScript only. Prices should be present in the HTML for crawlers.

7 Mistakes That Make People Leave Your Pricing Page

More than four visible plans in one row.
Feature rows that do not align across columns.
No recommended plan, so every option looks equally valid.
Jargon feature names that only your product team understands.
Prices hidden behind “Contact us” on every tier.
A mobile layout that keeps desktop column widths and forces pinch-zoom.
Identical CTA copy and styling in every column.

A Practical Build Order

List every feature, then delete every row that is identical across all plans.
Choose the layout pattern from the reference table above.
Wireframe at 1280px, 768px and 390px before touching color.
Set the grid: container width, card width, gutters, padding.
Place the price, plan name, audience sentence, CTA, then features, in that order inside each card.
Apply the highlight treatment to one plan only.
Add the full feature matrix below the cards if you have more than 8 differentiators.
Test on a real phone, not just a browser resize.
Instrument it: track clicks per plan, toggle usage and matrix expansion so you can iterate with data.

FAQ

What is the best design for a pricing page?

The best performing structure is usually three tiers of cards with one plan visually highlighted, a billing toggle if you offer annual plans, a condensed feature matrix below for detailed comparison, and an FAQ section addressing billing, cancellation and upgrades. Simplicity beats visual ambition: clear alignment, a readable price, and one obvious recommendation.

How do I create a price list for my business?

Start by grouping your offers into 2 to 4 packages based on who buys them, not on how much work they involve. For each package define the price, the billing unit, the 5 to 8 features that differentiate it, and the ideal customer. Then present them side by side with identical structure so the differences are immediately visible. Keep anything optional in an add-ons section below the main table.

How many columns should a pricing table have?

Two to four. Three is the sweet spot because it supports a clear middle recommendation and still fits comfortably on a laptop screen. If you need more options, use audience tabs or a usage slider instead of adding columns.

What is an example of a pricing structure?

A common SaaS structure is: Free (limited usage, 1 user), Starter at a low monthly per-seat price, Pro at roughly 2 to 3 times Starter with advanced features, and Enterprise with custom pricing. Other structures include flat-rate, usage-based (price per unit consumed), tiered usage (price drops at higher volumes) and per-feature pricing.

Should prices be displayed monthly or annually?

Display the monthly equivalent as the large number with a clear “billed annually” note, and provide a toggle to switch to true monthly pricing. Hiding the real annual charge creates refund requests and damages trust.

How do I design a comparison table for a long feature list?

Group features into 4 to 6 named sections, use a sticky header with plan names and prices, keep row heights consistent, and remove any row where every plan has the same value. On mobile, let users compare two plans at a time through a sticky selector rather than squeezing all columns onto the screen.

Do pricing tables affect SEO?

Indirectly, yes. Pricing pages attract high-intent queries, and a page that loads fast, renders prices in HTML, uses semantic table markup and keeps users engaged will perform better than one built entirely in script-rendered components or images of prices.

Final Word

Knowing how to design a pricing table comes down to one discipline: remove everything that slows down a comparison. Choose the layout that matches your plan count, lock the grid, highlight one plan, trim the feature list to what actually differs, and rebuild the whole thing for mobile instead of shrinking it.

Do that and your pricing page stops being the place where visitors hesitate, and becomes the place where they decide.