Adding Elementor tables to your web design is an effective way to present information in a clear, scannable format. Tables work well for showcasing statistical information, creating product comparison charts, displaying pricing tiers, and organizing data that would otherwise require dense paragraphs.
The Table widget from The Plus Addons for Elementor lets you create customizable, responsive tables in Elementor. You can add images, buttons, and advanced features like search and sort directly inside your Elementor table.
Best Used For
- Presenting product specifications, pricing comparisons, or feature breakdowns where rows and columns make relationships immediately clear.
- Displaying data imported from a CSV file or Google Sheet so the table updates when your source data changes, without manual edits.
- Embedding searchable, sortable data sets on documentation pages, resource hubs, or comparison pages where visitors need to find specific rows quickly.
Required Setup
- Elementor FREE Plugin installed and activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- This is a Freemium widget. To unlock the extra features, you need the PRO version of The Plus Addons for Elementor.
- Make sure the Table widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Table and activate.
Learn via Video Tutorial:
How to Activate the Table Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Key Features
- Multiple content sources — There are multiple ways to add content to the table: Standard, CSV File (Pro), Google Sheet (Pro), and Plus Form (Pro). Use this when your data already lives in a spreadsheet or form, because importing from a source eliminates the need to copy-paste rows manually.
- Image / Icon — Add icons or images to any table cell. This is useful when you want to visually differentiate rows, such as adding a checkmark icon to a feature comparison table.
- Tooltip — Add tooltips as hints for table cell content. Use this when a cell contains abbreviated or technical text that benefits from a short explanation on hover.
- Button — Add buttons inside table cells. This helps when each table row represents a product or service and you want a direct call-to-action within the row.
- Vertical Scrollbar — Add a vertical scrollbar to your table. Use this when the table has many rows and you want to cap the visible height without hiding data.
- Search — Add a search feature so visitors can search the content of a table. This helps when the table contains more rows than a visitor would scroll through comfortably.
- Sorting — Sort table column data using the sortable feature. Use this when visitors may want to reorder rows by price, name, or date.
- Entry Filter — Limit the initial visible table rows with the entry filter. This is useful when the full table is long and you want to show only a subset by default to reduce page load time perception.
- Mobile Responsive — Make your table mobile responsive. Use this when the table has many columns that would overflow on smaller screens.
How to add content to the Table widget?
To add the Table widget from The Plus Addons for Elementor, search for the widget in the Elementor widget panel and drag and drop it on the page.
Once you have added the widget to the page, it will create a dummy table for you. You can work on the existing table, or you can delete all the data and start from scratch.
First, you have to choose the table content source from the Content Table dropdown under the Table tab. Here you will find four options.
Custom — With this option, you have to add the table content manually. This is the best starting point when you are building a table with unique content that does not come from an external data source.
CSV File (Pro) — With this option, you can import a CSV file into your table. This saves time when your data is already structured in a spreadsheet and you want to avoid re-entering every row.
Google Sheet (Pro) — With this option, you can import Google Sheet data into your table. This is the right choice when your data is managed collaboratively and needs to stay in sync without manual updates to the page.
Plus Form (Pro) — With this option, you can show form submission entries in the table. Use this when you want to display user-submitted data, such as registrations or responses, in a structured layout on the front end.
The steps below use the Custom option to walk through the full table-building process. For a side-by-side comparison layout, see Comparison Data Table in Elementor. To pull data directly from your WordPress database, see Show WordPress Database Entries in an Elementor Table.
From the Table Header tab, you can add the table’s header. Once you open the tab, the first item you will see is a row. It is the row of the table header.
Note: To add a row in the table header or body, you have to initiate a row first.
Open the item, and you will see an Action dropdown with two options.
Start New Row — To initiate a new table row.
Cell Content — To add content in the table cell.
It must be set to Start New Row.
To edit the header cell content, open the first cell: ID item. You will 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.
You can also add a tooltip to the content by enabling 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. Use this when column headers use abbreviations or technical terms that need a short explanation.
From the Icon/Image tab, you can add an image or icon to the table content. Learn the process.
Finally, from the Advanced tab, you can manage the Column Span (colspan), Row Span (rowspan), column width, individual cell color and background color. This is useful when you need to merge cells for grouped headings or set specific column widths for readability.
Note: The column width set here will apply to all the cells of that particular column.
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.
To add or edit the table body content, go to the Table Body tab. It works very similarly to the Table Header section.
Similar to the Table Header, it will have a row first. Make sure the Action dropdown is set to Start New Row.
Next, open the item you want to edit, 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. You can also add a link to the cell from the Link field. Use this when the cell contains a product name or resource that should point visitors to another page.
Enable the Button toggle to add a button in the cell. (Pro) This helps when you want a direct call-to-action, such as a “Buy Now” or “View Details” button, alongside row data.
Then you will find a Tooltip toggle. 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. This can be used to show additional information when the cell content is too brief to be self-explanatory.
From the Icon/Image tab, you can add an image or icon to the table content. Learn the process.
Then from the Advanced tab, you can manage the content alignment, Column Span (colspan), Row Span (rowspan), and you can also use the Mark this cell as a Table Heading? dropdown to turn the cell into a table heading. Use this when a row itself needs a label that spans the full table width, which is common in grouped data tables.
You can follow the same process to edit other table body cells.
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.
Table Extra Settings
The Table widget from The Plus Addons for Elementor has some advanced features, which you can find under the Extra Settings tab. Each option is covered in a separate doc.
- Vertical Scrollbar — Add a vertical scrollbar to your table. Use this when the table has many rows and capping the visible area improves the layout.
- Search — Add a search feature so visitors can search the content of a table. This helps on pages with large data sets.
- Sorting — Sort table column data using the sortable feature. Use this when the order of rows matters to the visitor.
- Entry Filter — Limit the initial visible table rows with the entry filter. Use this to control how many rows appear before a “show more” interaction.
- Mobile Responsive — Make your table mobile responsive. Use this for any table with more than three or four columns.
How to style the Table widget?
You can style your table from the Style tab.
Note: Depending on the table content source, styling options will vary.
Table Header — From here, you can manage the table header content alignment, typography, color, row background color, padding, border, and more.
Note: The text color and row background color set from an individual cell will override the text color and background color set from the table header tab.
Table Body — Use this tab to style the table body. You can manage content alignment, vertical alignment, typography, color and row background color, padding, border, and more. You can also add a stripe effect to the table from here. The stripe effect is useful when the table has many rows, because alternating row colors help visitors track across a row without losing their place.
If you use buttons in your table, you can manage the button style, such as padding, width, typography, color, background color, and border from here.
Icon / Image Options — From here, you can control the styling of icons and images in your table. You can manage the icon size, color, position, and spacing. You will find similar settings for the image as well.
Search Bar / Show Entries — If you are using the search or show entry options in your table, you can manage their style from here. You will find settings for label color, input text color, typography, background color, padding, and border. You can also set the width and bottom space for the search bar and show entry field separately.
Tooltip Options — To style the tooltip in your table, use this tab. Under this tab, you will find:
- Tooltip Options — You can manage the tooltip position, theme, width, offset, and distance from here. You can choose the type of arrow and its color. You can also set the tooltip trigger type and animation from here.
- Tooltip Style — From here, you can manage the tooltip padding, text color, background color, and border.
You can also choose the tooltip icon, color, size, and left offset.
Table Option — From this tab, you can manage the overall table margin, padding, background, border, and overflow.
On Scroll View Animation — This is a global extension available for all widgets in The Plus Addons for Elementor. It adds a scrolling animation as the widget enters the viewport.
Learn more about On Scroll View Animation.
Advanced options remain common for all widgets. View Advanced Tab documentation.
