WordPress Editor does not have an option to add Tables, but Elementor does. In fact, if you are using Elementor, you can create a Comparison Table in minutes.
Create a Comparison Table for WordPress
As you are reading this blog, it is clear that you are looking for the least time-consuming process of adding a Table. And that’s exactly what this blog will give you. For creating a Comparison Table for WordPress you will need to install Essential Addons for Elementor. This addon comes with 50+ top-notch elements. If you are new to Essential Addons, know that all of its elements have the same customization options. Which means you can master this Addon overnight. Now lets jump right into learning the step-by-step guide to creating a Comparison Table.
To make a Comparison Table we need to divide our work into two segments, first we need to create the Table Layout and secondly, we need to fill up our table with our Content.
First Step: Create the Layout
There are two parts of the layout- the Headers and the actual Content. Let’s start off by creating the Headers.
Header
First, we need to make sure our Column Headers are in the right place. To edit the Header navigate to Content>>Header. First, decide the number of Headers you want in your Table and add cards accordingly. By default, there will be four Header Cards.
Column Span
Column Span is a great option on EA Data Table. This option lets you create Comparison/Filterable Tables of varying cell sizes. If I remove one Table Header and keep a Table Span of 2 for the First one, the first Header will have two cells under it.
The Arrangement of Content Cards
Remember that to create a Comparison Table layout we need to create two things- Headers and Content. We have learned how to create the Header Cards, now its time to move on to creating the Content Cards. Navigate to Content>>Content.
See the arrangement of the cards for the first row of entries? Now take a look at the table, there are four-row entries, but there are five cards. Why is that? Well, the first card in the sequence tells the table that its the start of a new batch of row entries.
Consider the first card as the initiator of a sequence. How do we distinguish it from other cards, well the first card which initiates a sequence has the label row:: Content, on the other hand, the actual row entry cards have the following label col:: Content.
Add a Second Set of Row entry
So given a table which has four Headers, we have to create five cards to enter the second line of row entry. So how do we insert a new card?
We can do it in two ways. You can either duplicate an existing card or you can add a completely new one.
Okay, so quickly add five cards, that is the first thing you need to do. Next, you need to check if all the labels on the cards are correct. Now, the first card in the sequence will have the label row: Content and the remaining four cards will have the label col: Content.
So after you have correctly arranged the cards for the 2nd set of row entries, the table would look something like this.
So now you know how to add a second row of entries to the EA Data Table. But how do you add rows after that? Simple, repeat the Card arrangement. The arrangement of Cards for the Third Row would be similar to that of both row 2 and row 1 and every other row that would come after.
Second Step: Add Content to your Table
Header Name
Now that we have created the layout, its time to add actual content to our Table. Let’s start off by giving a name to our headers. Navigate back to Content>>Header.
Type in the Header name inside the Column Name field highlighted using an arrow. You can also place image or icons beside the Header name. Use the Header Icon type to do so.
Content
Remember how each Row entry is represented as a Card. Did you wonder what these cards are for? Yes, they represent the actual row entries, but why are they represented in a card layout.
Go ahead and click on the cards labeled col:: Content. These cards let you add content to your Table. You can type in plain text, use the mini WordPress editor or pick an existing Elementor Template from your Library.
By using the mini WordPress Editor you can insert icons into the table.
Now there is another type of label for the cards, the ones labeled as row:: Content. Remember? Here is a recap on why and when we use row: Content, any card labeled as row:: Content is used to initiate a new arrangement of Row Entries. These cards do not represent any content that’s why they do not have any customization options like other cards. row: Content cards have only one customization option, using a Row Type drop-down you can turn the row:: Content into a col:: Content.
Style
Now that we have created the layout and also filled it up with our content, we need to add styling to it. Navigate to Style>>Header and align the Headers in the Middle. Now navigate to Style>>Content and set middle alignment for the content.
The Style Tab is divided into four parts each containing customization options for different sections of the EA Data Table.
Wrapping Up!
Using the EA Data Table element, you can create simple tables. You can go beyond the limit of single digit row/column tables. For example, create a Table which has 20-row entries and 6 Headers or maybe 30-row entries spread across 7 headers. Go ahead, try it yourself. But before that, here is a trick to make your Tables interactive. Scroll down a bit and see the Screenshot below.
Are you wondering how to make the table filterable just like the one you see in the above gif? There is a feature on EA Data Table that lets you toggle on/off the filterable feature with just one click. Navigate to Content>>Header and you will find a feature titled Enable Table Sorting.
I have given you enough information to start playing around with this element. Do share with us if you face any difficulty while working with this element. Just leave a comment and we will get back to you.
