Tables are a great way to organize and display content on your website.
Elementor has many great widgets to create websites, but currently, a table widget is not one of them.
In this article, you will learn how to create tables with Elementor.
Create Tables with Elementor
Out of the box, Elementor does not have a table widget. But, we can use an addon plugin to add an extra widget library.
Step #1: Download the addon
First, we need to download an addon plugin that contains a table widget and add it to the Elementor library.
Inside WordPress, navigate to Plugins -> Add New, search for Essential Addons for Elementor, install and activate it.
Step #2: Edit with Elementor
Once activated the plugin, edit your desired page with Elementor.
All the new Essential Addons for Elementor widgets were added to the left sidebar.
The table widget is part of the free version of the plugin. But, you’ll see many locked widgets that are part of the pro version. You can buy the pro version from the official website or from us for only $4.99.
Step #3: Use the table widget
Look for the Data Table widget and drag it to the desired section.
Like any other Elementor widget, use the content, style, and advanced tabs to edit the widget.
There are two tabs that we should focus on, the header and the content.
Let’s start with the table’s header.
Step #4: The table’s content
The widget contains one header that includes four cells.
Adjust how many cells to display on each row by adding or deleting the elements on the left.
In our example, we will build a table with a few USA states’ names, capital, and state code, so we will use three columns.
Thus, we can delete one header cell from the left and leave only three.
Once deleted, only three cells left in our header.
Now, all we have left to do is to change the header names like so:
- Left column – state name.
- Middle column – capital name.
- Right column – state code.
Great, after we are satisfied with the header, it is a great time to move forward and handle the content.
If the table came pre-loaded with four columns, why do we see five elements instead of only four?
Also, the first element starts with a row, and all the elements that go beneath it start with col.
The answer to the above questions is simple. When building a table, the first element is the row that contains all the columns (col) inside of it.
Imagine the row element as a horizontal line and all the column elements as vertical. Thus, we should always start building the content with a row and then add all the cells (col) under the row.
In our example, we decided to create three columns table instead of four, so let’s delete one of the col elements.
After deleting one of the col elements, our table got straighten up again and looks awesome.
Like we did we the header, we can change and edit the text of each of the col cells.
Click on one of the col elements to expand and edit the text. You also can add a link, class, or ID.
As shown above, we added our first row and it starts to look good. It’s a great time to add a couple more rows.
As mentioned earlier, we must start every table row with a row element. Therefore, to start a new row, we will click on Add Item and set the Row Type to Row.
Add many column elements as desire under the row element.
In the second row, we will add the New York state to the table body. In this case, we have a couple of options on how to display our data.
Merging tables’ cells
Like the first row, we can display the state and the capital in two different cells. But, because the state and the capital of New York are the same (for this example, pretend that it’s New York instead of Albany), let’s create one cell for them both.
To do that, change the col span option of the cell that you would like to expand to the number of the desired cells. In our example, it will be two.
All that has been left to do is to complete the table and add as many rows as you need.
Styling the Table
Style the table like any other widget of Elementor, from within the Style tab.
In the Style tab, change any color of the table. From the head to backgrounds, including text and link colors.
The best practice is to give odd and even rows different colors for easy reading.
Expand the Content Style tab and look for the background colors. Set background color to the odd row and a different color to the even row.
Feel free to play with the colors and change them as you wish. Elementor is very forgiving and easy to maneuver. If you make a mistake you can always reset and start from the beginning.
Additional Elementor Addons
Here is a list of alternative extensions plugins for Elementor that also have a table widget:
- The Plus Addons
- Ultimate Addons for Elementor
- Unlimited Elements
- Piotnet Addons
- Namogo Extras
- Element Pack
- Croco Blocks
- Essential Addons
- Premium Addons
All the plugins above are great and offer different kinds of widgets (including tables). You can get each of them from their official website or all of them from us.
Debating which plugin to use? check out our unlimited download plans and download them all for one small fixed price.
In this article, you learned how to create tables with Elementor on WordPress.
Leave us a comment down below and let us know which plugin you chose to achieve it.