---
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-08-10
lang: en
author: "Aditya Sharma"
description: "Creating a comparison table in Elementor helps visitors evaluate the features, pricing, or specifications of two or more products side by side at a glance. The Table widget in The..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-create-a-Comparison-Data-Table-in-Elementor_-1024x536.jpg
word_count: 759
---

# How to create a Comparison Data Table in Elementor?

## 

- The Plus Addons for Elementor Table widget builds a custom comparison data table in the Elementor editor without writing any code.
- Table widget supports custom headers, body rows, column spans, row spans, icons, tooltips, and per-cell color highlights.
- Google Sheets imports comparison data directly into the Table body when the dataset is large instead of entering each cell manually.
- The first column becomes visually distinct by setting Mark this cell as a Table Heading? to Yes, and the header and body use the same number of columns.

Creating a comparison table in Elementor helps visitors evaluate the features, pricing, or specifications of two or more products side by side at a glance.

The Table widget in The Plus Addons for Elementor lets you build a custom comparison data table in the Elementor editor without writing any code. It supports custom headers, body rows, column spans, row spans, icons, tooltips, and per-cell color highlights.

**Best Used For:**

- SaaS and software websites displaying pricing tier or feature comparisons- eCommerce product pages highlighting differences between product variants- Agency and service sites contrasting plan features for potential clients

*To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, [click here](/docs/table-elementor-widget-settings-overview/).*

**Requirement - This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers.**

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

To do this, add the Table widget to the page and follow the steps below.

1. From the **Content Table** dropdown under the **Table** tab, select **Custom** as the content source.

![table content](https://theplusaddons.com/wp-content/uploads/2023/03/table-content.png)

2. Go to the **Table Header** tab to add the header row of your table. The first item you see is a row. It is the row of the header.

![table header stracture](https://theplusaddons.com/wp-content/uploads/2023/03/table-header-stracture.png)

> *Note: To add a row in the table header or body, you have to initiate a row first.* 

Open the item and select **Start New Row** from the **Action** dropdown.

![table header row](https://theplusaddons.com/wp-content/uploads/2023/03/table-header-row.gif)

3. To edit a header cell, open the first **cell: ID** item. You will see the **Action** dropdown is set to **Cell Content** because it is a content cell.

In the **Content** tab, add your text in the **Text** field.

To add a tooltip, enable the **Tooltip** toggle. Select whether to display the tooltip on an icon or the entire cell. In the **Tooltip Content** field, enter the tooltip text. This is useful when you want to add explanatory notes to column headers without cluttering the comparison table.

From the **Icon/Image** tab, add an image or icon to the table header cell.

From the **Advanced** tab, manage the **Column Span** (colspan), **Row Span** (rowspan), column width, and individual cell color and background color.

> *Note: The column width set here will apply to all the cells of that particular column.*

![table header content](https://theplusaddons.com/wp-content/uploads/2023/03/table-header-content.gif)

Follow the same steps to edit the other table header cells.

Click the **+ Add Item** button to add more cells to the table header.

> *Note: You can add a row as well but ideally, a table header should have only one row.*

4. Go to the **Table Body** tab to add or edit the table body content.

Similar to the **Table Header**, it will have a row first. Make sure the **Action** dropdown is set to **Start New Row**. If you have a large dataset, you can [import your comparison data directly from Google Sheets](https://theplusaddons.com/docs/import-data-from-google-sheets-in-elementor-table/) instead of entering each cell manually.

![table body stracture](https://theplusaddons.com/wp-content/uploads/2023/03/table-body-stracture-533x1024.png)

5. Open the first item and make sure the **Action** dropdown is set to **Cell Content**.

From the **Content** tab, add the cell content in the **Text** field.

Enable the **Tooltip** toggle to add a tooltip to the cell or on an icon. In the **Tooltip Content** field, enter the tooltip text.

From the **Icon/Image** tab, add an image or icon to the table cell.

From the **Advanced** tab, manage the content alignment, **Column Span** (colspan), and **Row Span** (rowspan).

To highlight the first column of the comparison table and make it stand out, select **Yes** from the **Mark this cell as a Table Heading?** dropdown.

![table body content](https://theplusaddons.com/wp-content/uploads/2023/03/table-body-content.gif)

Follow the same steps to edit the other cells in the row. For remaining content cells, select **No** from the **Mark this cell as a Table Heading?** dropdown.

This keeps the first column visually distinct from the data cells.

Repeat steps 4 and 5 to build out the full comparison table.

Click the **+ Add Item** button to add more rows and cells to the table body.

> *Note: To add a row in the table header or body, you have to initiate a row first.*

> *Note: Make sure the number of columns in the table header and body are the same.*

![comparison table demo](https://theplusaddons.com/wp-content/uploads/2023/03/comparison-table-demo.png)

This is how you create a comparison data table in the Elementor editor using the Table widget from The Plus Addons for Elementor.

For a pre-styled pricing comparison layout with a monthly/annual toggle, see [How to show a Yearly/Monthly pricing table with Switcher in Elementor](https://theplusaddons.com/docs/pricing-table-in-elementor-switcher/). The Pricing Table Switcher widget provides a dedicated comparison layout without extra configuration.

Also, check [How to make Data Tables Mobile Responsive in Elementor](https://theplusaddons.com/docs/make-data-tables-mobile-responsive-in-elementor/) to ensure your comparison table displays correctly on all screen sizes.