When someone is choosing between two or three options, a comparison table answers the question faster than any amount of prose.
The Data Table block builds one from the same two repeaters, with merged headings, tick icons and a button at the end of each row.
For every Data Table setting in one place, see the Data Table block guide.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Data Table, switched on under Nexter > Blocks in your WordPress dashboard.
- Your options decided: one column per thing being compared, and one row per feature.
Steps
- Add the Data Table block to your page and click Design from Scratch.
- In the Table panel, leave Type on Standard.
- Open Table Header. Each item’s Action is either Start New Row or Cell Content — start a row, then add one Cell Content item per column and type its heading.
- Open Table Body and do the same: a Start New Row item, then one Cell Content item per column with its Text.
- To group columns under one heading, open that header item’s Advance tab and set Column Span to how many columns it should cover.
- Use each row’s first cell for the feature name and the rest for the values.
- Add tick and cross icons from a cell’s Icon tab, and a button in the last row from its Button switch.
- Publish the page.
What Makes a Comparison Table Readable
- Put the feature name in the first column so each row identifies itself.
- Use icons rather than the words yes and no — they are quicker to scan.
- Keep the number of columns low. Three options is usually the most that stays readable on a phone.
- End with a button in each option’s column so the decision has somewhere to go.
How It Behaves
- Column Span on a header cell makes it cover several columns, which is how you put one heading above a group of options.
- Row Span does the same downwards, for a label that covers several rows.
- Spanned cells are set on the individual item’s Advance tab, so the rest of the table is unaffected.
- On a phone the table scrolls sideways, so put the feature column first.
Limitations
- A spanned table has more cells in a row than it has headings, and the table script expects those to match. It logs a heading mismatch in the browser console and the extra features become unreliable.
- Because of that, do not combine Column Span or Row Span with the search box, sorting or the entries dropdown. The block’s own note says the entries dropdown is not compatible with them.
- A comparison table is presentational, so build it as Standard rather than importing it.
- Wide comparison tables are awkward on phones no matter which mobile option you pick.
Troubleshooting
The columns do not line up
Count the cells. Every body row needs the same number of Cell Content items, and a spanned header cell counts as the number of columns it covers.
Sorting or search misbehaves on this table
Those features do not get on with merged cells. Switch them off for a comparison table, or drop the spans.
The merged heading covers the wrong columns
Change Column Span on that header item. It counts columns from where the cell starts.
