---
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-04-12
author: "Aditya Sharma"
description: "Creating a comparison table in Elementor can be a great way to help readers quickly sort through the features and benefits of two or more products. Whether you’re comparing the..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-create-a-Comparison-Data-Table-in-Elementor_-1024x536.jpg
word_count: 677
---

# How to create a Comparison Data Table in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Table widget that allows users to create comparison tables without coding knowledge.
- Users can add tooltips to table cells by enabling the Tooltip toggle in the Content tab.
- The Table widget requires The Plus Addons for Elementor to be installed and activated for full functionality.
- To highlight the first column of a comparison table, users select 'Yes' from the Mark this cell as a Table Heading? dropdown.

Creating a comparison table in Elementor can be a great way to help readers quickly sort through the features and benefits of two or more products. Whether you’re comparing the features of different plug-ins or the cost of different plans, a comparison table can help you make your point in a visually appealing way.

With the help of the Table widget from The Plus Addons for Elementor, you can create comparison tables quickly and conveniently without having any coding knowledge.

*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's installed & 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 widget on the page, then follow the steps - 

1. Choose **Custom** as the content source from the **Content Table** dropdown under the **Table** tab.

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

2. From the **Table Header** tab, add the header of your table. Once you open the tab, the first item you’ll 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 the header cell content, open the first **cell: ID** item. You’ll see the **Action** dropdown is set to **Cell Content** because it is a content cell.

Then in the **Content** tab, you can add text content in the Text field. 

To add a tooltip to the content, enable the **Tooltip** toggle. You can add the tooltip on an icon or the entire cell. In the **Tooltip Content** field, you can add the tooltip text.

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

Finally, from the **Advanced** tab, you can manage the Column Span (colspan), Row Span (rowspan), column width, individual cell colour and background colour.

> *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)

You can follow the same process 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**.

![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, you can add the content for the cell in the **Text** field.

Then you’ll find a **Tooltip** toggle. You can turn it on to add a tooltip to the cell or on an icon. In the **Tooltip Content** field, you can add the tooltip text.

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

Then from the **Advanced** tab, you can manage the content alignment, Column Span (colspan), Row Span (rowspan).

We’ll highlight the first column of the comparison table to make it stand out. To do that, 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)

You can follow the same process to edit other cells in the row. But make sure to select **No** from the **Mark this cell as a Table Heading?** dropdown.

This will make the first column focused.

You can repeat steps 4 and 5 to create the entire comparison table. 

Click the **+ Add Item** button to add more rows and cells in 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 easy it is to create a comparison table in Elementor.

Also, check [How to make Data Tables Responsive in Elementor](https://theplusaddons.com/docs/make-data-tables-mobile-responsive-in-elementor/).

## Frequently Asked Questions

**Q: What is the best way to structure a comparison data table in Elementor?**
A: A well-structured comparison data table should have a clear header and body layout. Start by adding a single row for the header, then use the Table Header tab to define the column titles. Each column should represent a different product feature or aspect. Ensure that the number of columns in the header matches the body to maintain consistency. This structure helps users quickly identify and compare key features.

**Q: What should I do if my comparison table isn't displaying correctly?**
A: If your comparison table isn't displaying as expected, check that the number of columns in the header matches the body. Each row in the header should correspond to a row in the body. Additionally, ensure that the Table widget from The Plus Addons for Elementor is properly installed and activated, as this widget is essential for creating comparison tables.

**Q: How can I make my comparison data table responsive in Elementor?**
A: To make your comparison data table responsive, refer to the guidelines on [making data tables mobile responsive in Elementor](https://theplusaddons.com/docs/make-data-tables-mobile-responsive-in-elementor/). This ensures that your table adjusts seamlessly across different screen sizes, providing a better user experience on mobile devices.

**Q: Is it better to use a single row for the header in a comparison table?**
A: Using a single row for the header in a comparison table is generally recommended for clarity. It keeps the table organized and makes it easier for users to scan the features being compared. While you can technically add more rows, a single header row typically suffices to convey the necessary information without overwhelming the viewer.