A comparison table puts plans, products or options side by side, so visitors can see the differences at a glance.
The Table widget from The Plus Addons for Elementor builds one directly in the editor: a header row, a highlighted first column and cells that span several columns.
To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — this works in the free plugin; Pro is not needed.
- Widget to enable: Table, switched on under The Plus Addons > Widgets.
- Tooltips on header or body cells need The Plus Addons for Elementor Pro.
Build the Header Row
- Add the Table widget to your page. In Content > Table, keep Content Table set to Custom.
- Open Table Header. The first item has Action set to Start New Row; every row starts with one of these.
- Open the next item. Its Action is Cell Content. Type the column name, such as “Feature”, in Text.
- Click + Add Item for each further column (for example “Free” and “Pro”).
Each header cell also has an ICON / IMAGE tab for an icon or picture next to the text, and an ADVANCE tab with Column Span, Row Span, Column Width, Color and Background Color for that cell. With Pro, the Tooltip switch adds a hint on the whole cell or on a small info icon.
Add the Body Rows
- Open Table Body. Add an item with Action set to Start New Row, then one Cell Content item per column with its Text.
- Repeat for every row. Each row needs the same number of cells as the header.
- To highlight the first column, open its cell, go to the Advance tab and set Mark this cell as a Table Heading? to Yes. Do this for the first cell of every row.
With the first column marked as headings, the finished table looks like this on the page:
Merge Cells
On a cell’s Advance tab (ADVANCE in the header), Column Span stretches the cell across several columns and Row Span down several rows. When a cell spans, leave out the cells it covers: a body cell with Column Span 3 is the only cell of its row.
Add styling in the Style tab, such as a header background in Table Header and stripes in Table Body. Here is a styled comparison table with icons in the first column:
Settings
| Setting | Where | What it does | Default |
|---|---|---|---|
| Action | Each header and body item | Start New Row begins a row; Cell Content adds a cell to it | Cell Content |
| Mark this cell as a Table Heading? | Body cell > Advance | Yes outputs the cell as a heading cell (th) | No |
| Column Span / Row Span | Header cell > ADVANCE, body cell > Advance | Merges the cell across columns or rows | 1 |
| Column Width | Header cell > ADVANCE | Sets the width of that column | — |
| Color / Background Color | Header cell > ADVANCE | Text and background colour of that header cell | — |
| Tooltip (Pro) | Header and body cells | Shows a tooltip on the whole cell (Box) or on an info icon (Icon) | Off |
Limitations
- Merged cells break the interactive options. With a Column Span or Row Span cell in the table, turning on Table Sortable, Table Searchable or Entry Filter Dropdown showed visitors a browser alert (“DataTables warning: … Incorrect column count”) and the option did not work. Keep those options off in comparison tables that merge cells.
- The header row and body rows are built item by item; there is no import for a comparison table except the Pro sources (CSV File, Google Sheet).
Troubleshooting
My columns are shifted
A row has more or fewer cells than the header, or a merged cell still has the cells it covers. Count the Cell Content items after each Start New Row.
Visitors see a DataTables warning popup
The table has merged cells and a sorting, search or entry option is on. Turn those options off in Extra Settings.
