# The Comparison Table Block: Put Your Plans Side by Side

URL: https://pro.flexablock.com/the-comparison-table-block-put-your-plans-side-by-side/
Published: 2026-07-15T03:00:33+00:00
Updated: 2026-07-17T01:15:13+00:00
Author: admin

# 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 individuals[Choose Starter](#)

PopularProFor growing teams[Choose Pro](#)

BusinessFor companies[Contact us](#)

ProjectsSingleUnlimitedUnlimitedPriority supportCustom domainTeam seatsSoloSmall teamUnlimitedAdvanced analytics

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

StarterFor individuals[Choose Starter](#)

PopularProFor growing teams[Choose Pro](#)

BusinessFor companies[Contact us](#)

ProjectsSingleUnlimitedUnlimitedPriority supportCustom domainTeam seatsSoloSmall teamUnlimitedAdvanced analytics

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

StarterFor individuals[Choose Starter](#)

PopularProFor growing teams[Choose Pro](#)

BusinessFor companies[Contact us](#)

ProjectsSingleUnlimitedUnlimitedPriority supportCustom domainTeam seatsSoloSmall teamUnlimitedAdvanced 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 individuals[Choose Starter](#)

PopularProFor growing teams[Choose Pro](#)

BusinessFor companies[Contact us](#)

ProjectsSingleUnlimitedUnlimitedPriority supportCustom domainTeam seatsSoloSmall teamUnlimitedAdvanced analyticsOnboarding 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](https://wordpress.org/plugins/flexa-block/)