Table

< All Topics

As you know, Tables are the most common and oldest form of elements used when building websites. Use our Table widget to create simple as well as complex table layouts. Also, you can create a table using CSV file which is awesome. It can be useful for creating all types of Comparison, Pricing, or other Advanced Layouts with ease.

Pro tip
If the rows and columns in you table are large in number with a lot of content, make sure that you create searchable tables as shown in our demo. That way, it will be easy for the users to find what they are looking for.

How to use the Table Widget of The Plus Addons For Elementor

The Table can be created in two ways i.e. Custom or using a CSV file. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the Table Widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Table 

Content Table

Specify if you want to add a Custom Table or add a CSV file. 

Table Header

Set the table header content here. We have already created on sample table for you. Follow along the lines to create your own by simply editing it.

Click on Add Item to add your table content.

Row: You can add a new row
Cell Content: Add your content, icon and set other advance settings such as Column Span, Row Span, Column Width Color, and Background Color.

Table Body

Very similarly, add content for your table body.

Extra Settings

Table Searchable

Slide right to enable if you want you table content to be searched. 

Search Field Label

Enter text here for Search Field Label. 

Table Sortable

Slide right to enable a sortable table. 

Entry Filter Dropdown

Enable to control the number of entries in a table.

Mobile Responsive

Specify what type of mobile responsiveness you want to use. 

Table Searchable Settings for Table widget

2. Style

The Style tab is used for customizing the appearance of all the Table widget components. Let’s understand each of these customization options. 

Table Header

Set the Alignment, Typography, Padding, Row Text Color, Row Background Options for the Table header here. 

Table Body

Set the Alignment, Typography, Padding, Row Text Color, Background Type, and Box Shadow for the Table Body and button here. 

Icon/Image Options 

Set the Color, Size, Positioning, Spacing of the Icon, and Image. 

Search Bar/Show Entries 

Set the Label Color, Typography, Background color, Padding, Width of the Search Bar and Show Entries section. 

Table Option 

Set the Magin, Padding, Background, and Broder for the Table. 

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?