Pricing Comparison Table is a free section for the question every pricing page gets: what exactly is the difference between the plans? Three plans sit side by side at the top with their name, price and button, and below them the features are listed row by row with a tick, a dash or a short limit for each plan.

Built for scanning

One plan can be highlighted with a badge such as "Most popular", which gives it a tinted column and a brand-coloured top edge. Feature rows are grouped under small sub-headings, such as Core, Features and Support, and each row lights up gently on hover so the eye can follow it across. The first column holds the feature names and stays in view on small screens.

Plain text cells

Each cell is a text field, so you are not limited to ticks. Use a tick (✓) for included, a dash (—) for not included, or a limit such as "10 GB", "Unlimited" or "Advanced + export". To make a heading row, fill in the group heading; to remove a row, delete it. There is room for up to thirty rows.

Accessible and responsive

The table uses table, row, column header and cell roles so screen readers announce the plan for every value. On narrow screens the table scrolls sideways inside a keyboard-focusable region instead of squashing. Each plan has its own button with its own link.

Export it

Copy one HTML file, download a ZIP, copy a React or Vue component, or fork into My Code. Put it under the plan cards of Three-Tier Pricing, or beside Pricing List Rows for services.