---
title: "How to create a Comparison Data Table in Elementor?"
url: https://theplusaddons.com/docs/comparison-data-table-in-elementor/
date: 2023-03-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-create-a-Comparison-Data-Table-in-Elementor_-1024x536.jpg
word_count: 682
---

# How to create a Comparison Data Table in Elementor?

## 

- The Table widget from The Plus Addons for Elementor builds a comparison table directly in the Elementor editor with a header row, a highlighted first column and cells that span several columns.
- The free plugin includes the Table widget, and Pro is only needed for tooltips on header or body cells.
- Each header and body row starts with Start New Row, then each Cell Content item fills one column, and the first cell of every body row can be marked as a Table Heading.
- Merged cells use Column Span or Row Span, but Table Sortable, Table Searchable and Entry Filter Dropdown stop working when cells span columns or rows.

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](https://theplusaddons.com/docs/table-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/data-tables/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![The first Table Header item with Action set to Start New Row](https://theplusaddons.com/wp-content/uploads/2026/09/table-header-row.webp)

- 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”).

![A Table Header cell item with Product in the Text field](https://theplusaddons.com/wp-content/uploads/2026/09/table-header-cell.webp)

![Animated demo of adding a Start New Row item in the Table Header section](https://theplusaddons.com/wp-content/uploads/2023/03/table-header-row.gif)

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.

![Animated demo of editing the content of the Table Header cells in the Elementor editor](https://theplusaddons.com/wp-content/uploads/2023/03/table-header-content.gif)

## 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.

![Mark this cell as a Table Heading? set to Yes on the Advance tab of a Table Body cell](https://theplusaddons.com/wp-content/uploads/2026/09/table-body-heading.webp)

![Animated demo of editing the Table Body cells in the Elementor editor](https://theplusaddons.com/wp-content/uploads/2023/03/table-body-content.gif)

With the first column marked as headings, the finished table looks like this on the page:

![A Free versus Pro comparison table on the live page with a blue header row and bold first column](https://theplusaddons.com/wp-content/uploads/2026/09/table-result-comparison.webp)

## 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.

![Column Span set to 3 on the Advance tab for a note row that spans the whole table](https://theplusaddons.com/wp-content/uploads/2026/09/table-body-colspan.webp)

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:

![Example comparison table with a purple background and icons in the first column](https://theplusaddons.com/wp-content/uploads/2023/03/comparison-table-demo.png)

## 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**.

## Related Docs

- [Table widget settings overview](https://theplusaddons.com/docs/table-elementor-widget-settings-overview/)- [Insert images in table cells](https://theplusaddons.com/docs/insert-images-in-table-content-in-elementor/)- [Insert a button inside a table cell](https://theplusaddons.com/docs/insert-button-inside-elementor-table/)- [Make data tables mobile responsive](https://theplusaddons.com/docs/make-data-tables-mobile-responsive-in-elementor/)

## Frequently Asked Questions

**Q: How do I build a comparison data table in Elementor without coding?**
A: The Table widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH builds the table directly inside the Elementor editor with a header row, body rows, and cells that can span multiple columns. That matters because a comparison table is meant to show plans or products side by side at a glance, not force you into custom code. The widget works in the free plugin, and Pro is only needed for tooltips.

**Q: Can I use the Table widget for a comparison table on the free version?**
A: The free plugin is enough for the core comparison table setup. The page states that this widget works in Edition: Free, so Pro is not needed for the basic table itself. The only Pro-only part called out here is tooltips on header or body cells. That makes the free version practical for standard plan or feature comparisons, while Pro adds extra hinting on top of the same table structure.

**Q: What is the best way to highlight the first column in a comparison table?**
A: Marking the first cell of every body row as a Table Heading is the cleanest way to highlight that column. In this setup, the first column becomes the visual anchor for features while the other columns hold the compared options like Free and Pro. The page also notes that this outputs proper heading cells, which helps keep the structure consistent instead of treating every cell as plain data.

**Q: Why are my columns shifted in my Elementor comparison table?**
A: Shifted columns usually mean one row has more or fewer Cell Content items than the header, or a merged cell still has cells left underneath it. The page’s fix is simple but important: count the Cell Content items after each Start New Row and make sure merged cells replace, rather than sit on top of, the cells they cover. A body cell with Column Span 3 should be the only cell in that row segment.

**Q: Can I merge cells in an Elementor comparison table and still use sorting or search?**
A: Merged cells and interactive options do not mix well here. The page says Column Span and Row Span can trigger a browser alert like “DataTables warning: ... Incorrect column count” if Table Sortable, Table Searchable, or Entry Filter Dropdown are turned on. For comparison tables with merged cells, keep those options off so the layout stays stable and visitors do not hit warning popups.

**Q: What settings matter most when creating a comparison data table in Elementor?**
A: The key settings are Action, Mark this cell as a Table Heading?, Column Span / Row Span, Column Width, Color / Background Color, and Tooltip. Action controls whether an item starts a new row or adds a cell, while Column Span and Row Span handle merged layouts. For styling, Table Header and Table Body control background and stripe effects. A full settings overview is here: [Table widget settings overview](https://theplusaddons.com/docs/table-elementor-widget-settings-overview/).