The tabular form of data is considered one of the most efficient way of displaying data. Anything that tops tabular data or tables is Charts, and ironically they too are made with the help of tables. If you use Elementor, you can quickly create and style a table with Elementor Table widget.
To bring this efficient displaying of data on a website build with elementor, we have designed Elementor Tables widget. This PowerPack widget comes with loads of customization and design power which you can use to design your website.
Tables can be used to display various form of data like:
- List of Products/Items
- Product/Item Features
- Price List
- Food & Beverages Menu
- Services List
- List of Team Members, Employees, etc.
Let’s take a look at how you can create a Table with Elementor or display data from CSV file easily with Elementor Table Widget.
How to Create a Table using the Elementor Table Widget?
Firstly, open the page in Elementor editor in which you want to add the Table. For this, Login to your WordPress Dashboard > Pages. Now select the page in which you wish to add the table. Now drag and drop Elementor Table widget in place in Elementor editor.
Elementor Table Content Tab
Here, the first option is “Source“. You can select if you want to import a CSV file or if you would rather enter the data manually. In this tutorial, we are going to import a CSV file instead of manually entering the data.
Select the source as “CSV File” and upload the CSV. As soon as you insert the CSV file, you will see the table showing up in the editor.
Elementor Table Style Tab
Now we will change how the table looks with the style tab.
- Table Settings: Here, you can change the width, alignment and the border-radius for the overall structure. I have changed the alignment to center and set the width to 100.
- Header Settings: This allows you to customize the header. Here I have changed the vertical and horizontal alignment of the header. Changed the text and background color, and customized the typography as well.
- Rows Settings: For each row, you can enable stripped rows and can choose the color of the rows.
- Cells Settings: Here you can customize your individual cell’s look and design. You can change the vertical and horizontal align, typography, text and background color, border, padding, etc.
- Footer: These options let you customize the design of the footer. I have not made any changes here as we do not have the footer in our table.
- Icon Settings: If you have added some icons using the content tab, then you can customize those icons as well from the icon settings.
- Column Settings: With these, you can add multiple styles for your columns and can customize them the way you wish to. You can change the body color, heading and footer colors as well.
Once you have made all the changes, this is what the Table in Elementor looks like:
How to Create a Table with a CSV File?
It can be a time-consuming task to add the data manually and create a table. If you have the data in a CSV file then you can directly import the CSV file to create a table using the PowerPack’s Elementor Table widget. You simply need to upload and the CSV file. The Table widget will import all the data from that file to and a table in Elementor.
If you want to make your table more interactive, you can do that too with the sortable feature which gives your users the option to sort the table as per their needs. You can do loads of alterations to your table and can make it look the way you want from the Style tab.
Winding It Up!
With all the settings options of the Elementor table widget, you can create one using elementor in no time. You can check out the demos of the table widget as well to give you more idea of what all can you do with the widget.
If you liked this widget, you can get it with the PowerPack add-on for Elementor. This addon gives you more than 50 creatively designed widgets which you can use to take your WordPress design to the next level.
What do you think of this widget? Let us know by commenting down below!
If you liked this step-by-step tutorial and found it helpful, do share it!