Flexa Block Pro

The Comparison Table Block: Put Your Plans Side by Side

A side-by-side plan-and-feature grid — list your columns and rows, mark each cell with a check or a cross, and spotlight the option you want chosen.

Plans are easier to choose when they sit side by side

You have a few plans, or a couple of options, and the differences between them are the whole decision. Buried in paragraphs, nobody weighs them up. And building a real comparison grid in HTML — headers, aligned columns, check marks, a highlighted ‘best’ option — is a fussy afternoon of table markup and CSS.

The Comparison Table block builds that grid from two simple lists. You name the columns, you name the feature rows, and it lays out an aligned, readable table — with a spotlight on the option you would like people to pick.

List your columns and feature rows — the whole grid builds from two simple lists
Type ‘true’ or ‘false’ and each cell becomes a check or a cross — pick the glyph you like
Spotlight one plan with a badge and an accent bar, so the eye lands where you want
A sticky header and horizontal scroll keep the columns readable on small screens
Plus zebra striping, dividers, per-cell colours and typography, CTA buttons, spacing and responsive controls

You work in two lists. Add a column for each plan and a row for each feature, then fill the cells: type ‘true’ for a check, ‘false’ for a cross, or any words you like. Turn on the spotlight for one column, add a badge, and it’s done — the preview matches the page as you go.

See it work

Three plans, one spotlighted. Checks and crosses across the rows, with the middle column pulled forward by a badge and accent bar.

StarterFor individualsChoose Starter
PopularProFor growing teamsChoose Pro
BusinessFor companiesContact us
ProjectsSingleUnlimitedUnlimited
Priority support
Custom domain
Team seatsSoloSmall teamUnlimited
Advanced analytics

Stars and dashes instead of checks and crosses. The same table with a different mark style.

StarterFor individualsChoose Starter
PopularProFor growing teamsChoose Pro
BusinessFor companiesContact us
ProjectsSingleUnlimitedUnlimited
Priority support
Custom domain
Team seatsSoloSmall teamUnlimited
Advanced analytics

Column dividers on, zebra off. A cleaner grid look for exactly the same content.

StarterFor individualsChoose Starter
PopularProFor growing teamsChoose Pro
BusinessFor companiesContact us
ProjectsSingleUnlimitedUnlimited
Priority support
Custom domain
Team seatsSoloSmall teamUnlimited
Advanced analytics

A sticky header as you scroll. The plan names stay in view while you read down the rows, and the table scrolls sideways on a narrow screen.

StarterFor individualsChoose Starter
PopularProFor growing teamsChoose Pro
BusinessFor companiesContact us
ProjectsSingleUnlimitedUnlimited
Priority support
Custom domain
Team seatsSoloSmall teamUnlimited
Advanced analytics
Onboarding help

Ready to lay your plans out?

The Comparison Table block ships inside Flexa Block. Install the plugin and it’s waiting in your editor the next time you open a page.

Download Flexa Block
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found