Search for a plugin or theme

Elementor Table Guide – Create Beautiful Tables with Elementor in WordPress

Elementor Table Guide – Create Beautiful Tables with Elementor in WordPress

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.

Install essential addons for Elementor plugin

Step #2: Edit with Elementor

Once activated the plugin, edit your desired page with Elementor.

Edit 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.

Elementor table

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.

Table widget tabs

Let’s start with the table’s header.

Step #4: The table’s content

The header

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.

Delete one of the table column

Once deleted, only three cells left in our header.

Table with only three columns

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.

Creating the table header

Great, after we are satisfied with the header, it is a great time to move forward and handle the content.

The body

If the table came pre-loaded with four columns, why do we see five elements instead of only four?

Elementor widget libraries

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.

Edit the col element

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.

Expand the table column

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.

Table row odd and even background colors

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.

Conclusion

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.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply