Comparison Matrix builds a real HTML table from columns and rows you type in. Write yes or no for ticks and crosses, highlight the column you recommend and turn number rows into bars. On phones each row label moves above its cells so the table still fits.
A three-package service comparison with a highlighted column, then a product spec table with bar rows. Narrow the window to see the rows stack.
Three packages with ticks and crosses. The middle column is highlighted and carries a Most booked pill. Row sub-labels add detail where it helps.
| Package | Wash£18 per visit | Most bookedValet£45 per visit | Full detail£120 per visit |
|---|---|---|---|
| Exterior hand wash | Included | Included | Included |
| Wheels and tyres cleaned | Included | Included | Included |
| Interior vacuumSeats, mats and boot | Not included | Included | Included |
| Dashboard and trim wipe | Not included | Included | Included |
| Machine polish | Not included | Not included | Included |
| Paint sealantLasts up to 6 months | Not included | Not included | Included |
| Time on your car | 30 min | 90 min | 4 hours |
Numeric rows use Show As Bars, so each value draws a bar scaled within its row and the highest value is marked as the winner. Grid dividers and a visible caption.
| Model | Metro£1,299 | Ridgeline£1,849 | Trail X£2,699 |
|---|---|---|---|
| Frame | Aluminium | Aluminium | Carbon |
| RangeOn a full charge | 45 miles | 62 miles | 80 miles (best) |
| Battery | 400 Wh | 500 Wh | 625 Wh (best) |
| Motor torque | 50 Nm | 65 Nm | 85 Nm (best) |
| Gears | 7 | 9 | 11 (best) |
| Built-in lights | Included | Included | Not included |
| Folds for storage | Included | Not included | Not included |
Columns across the top, rows down the side, values separated by a bar.
Add a column for each plan or product with a heading, an optional sub-heading such as a price, and an optional pill.
Give each row a label and type its values separated by |, one per column. Use yes and no for ticks and crosses.
Set the column number to highlight, turn on bars for number rows and style the table to match your site.
Everything a plan or spec comparison needs, in one element.
A proper table with column and row headers, plus table roles that keep the meaning when the layout stacks.
Type yes or no (or true or false) and get a tick or cross icon with screen reader text you can change.
Pick a column to fill with your brand colour as one continuous block with rounded ends.
Add a short pill such as Popular above any column heading. It swaps colours inside the highlighted column.
Turn on Show As Bars and numbers like 500 Wh draw a bar scaled against the largest value in the row.
On bar rows the highest value is marked in bold with the winner fill, and screen readers hear your winner text.
At the breakpoint you choose, each row label moves above its cells and the cells stay side by side.
Prefer a wide table? Allow horizontal scroll and set a minimum width instead of stacking.
Headings, sub-headings, pills, row labels, cell values and the caption all accept dynamic data.
Any time a visitor is choosing between a few options.
Show what each package includes, from cleaning rounds to maintenance contracts.
Compare models by battery, size, weight or capacity with bars that make the gaps clear.
Lay out gym, club or subscription tiers with the one you recommend highlighted.
Put your product next to the alternatives with ticks and crosses.
Compare course length, contact hours and what is included.
Show capacities, facilities and prices for each room.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Columns | ||
| Heading | The column name. | Starter, Pro, Team |
| Sub-heading | Optional line under the heading, such as a price. | — |
| Pill Text | Optional pill above the heading, e.g. Popular. | — |
| Rows | ||
| Row Label | The name of the row. | — |
| Row Sub-label | Optional smaller line under the label. | — |
| Cell Values | One value per column separated by |. yes and no become ticks and crosses. | — |
| Show As Bars | Draw a bar under numeric values, scaled within the row. | Off |
| Lower Is Better | Treat the lowest value as the row winner. | Off |
| Settings | ||
| Highlight Column | The column number to highlight, 0 for none. | 2 |
| Table Caption | A caption for the table. | Plan comparison |
| Show Caption Visibly | Show the caption above the table instead of only to screen readers. | Off |
| Top-left Label | Text for the empty top-left cell. | — |
| Tick Text (Screen Readers) | What screen readers say for a tick. | Included |
| Cross Text (Screen Readers) | What screen readers say for a cross. | Not included |
| Mark Row Winner On Bar Rows | Mark the best value in each bar row. | On |
| Winner Text (Screen Readers) | Added after a winning value for screen readers. | best |
| Allow Horizontal Scroll | Let the table scroll sideways on narrow screens. | Off |
| Layout | ||
| Row Label Column Width | Width of the label column. | 32% |
| Cell Alignment | Left, Centre or Right. | Centre |
| Row Padding (Vertical) | Space above and below each row. | 14px |
| Cell Padding (Sides) | Space either side of each cell. | 12px |
| Dividers | Between Rows, Rows And Columns, or None. | Between Rows |
| Divider Width | Line width of the dividers. | 1px |
| Stack At | The breakpoint where row labels move above their cells, or never. | Phone landscape |
| Table Min Width (Scroll Mode) | Minimum table width when scrolling is allowed. | 640px |
| Column Headers | ||
| Heading and Sub-heading Typography | Text styles for the column headers. | — |
| Header Padding (Vertical) | Space above and below the header row. | 18px |
| Row Labels | ||
| Label and Sub-label Typography | Text styles for the row labels. | — |
| Cells | ||
| Cell Typography | Text style for values. | — |
| Tick / Cross Size | Size of the icons. | 1.375em |
| Tick, Cross and Divider Colour | Colours outside the highlighted column. | Brand colour ticks |
| Highlighted Column | ||
| Fill and Text | Background and text colour of the highlighted column. | Brand colour, white text |
| Radius | Corner radius at the top and bottom of the column. | 12px |
| Tick, Cross and Divider Colour | Colours inside the highlighted column. | — |
| Pill | ||
| Typography and Padding | Text style and padding of the pill. | — |
| Background and Text | Pill colours, with separate colours for the highlighted column. | Brand colour, white text |
| Bars | ||
| Height | Bar height. | 6px |
| Radius | Bar corner radius. | 999px |
| Track, Fill and Winner Fill | Bar colours, with the winner in the brand colour. | — |
| Track and Fill (Highlighted Column) | Bar colours inside the highlighted column. | — |
| Spacing | ||
| Margin | Top and bottom margin. | — |
Type one value per column separated by a | character, e.g. yes|no|10 GB. Short rows are padded with empty cells and extra values are ignored.
With Show As Bars on, the first number in each value is read (so 500 Wh counts as 500) and each bar is drawn as a share of the largest value in that row.
At the Stack At breakpoint, phone landscape by default, each row label moves onto its own line above the cells, and the cells stay side by side. Set it to never and turn on horizontal scroll if you prefer a sideways scroll.
Yes. It is a real table with column and row headers, a caption for screen readers, and spoken text for ticks, crosses and row winners.
Yes. Set Highlight Column to 0, as in the e-bike demo above.
Yes. Headings, sub-headings, pills, row labels, cell values and the caption accept dynamic data.
Comparison Matrix is included with Phox Elements, along with 140+ other premium elements for Breakdance.