Quick Way of Creating Tables For WordPress With Varying Cell Size

How often do you have to create tables in WordPress blogs? At times, you will have no better option to present content without using a Table. But this might sound daunting to those who cannot write Code as WordPress Editor does not have a dedicated feature for adding Tables.

WordPress Tables

You do not need to write codes in order to create a content table for your WordPress blog. In this tutorial blog, you are going to learn just that. I am going to use Elementor and Essential Addons and teach you how to create a Filterable Data Table with Varying Cell Size without having to write a single line of code.

Blog Tools

I have already mentioned the plugins you are going to need in order to create a Filterable Data Table. Both the plugins have free versions, so remember that testing the plugin once won’t cost you a single penny.

Below, you can see a simple table! Simple because I did not write a single code to create this table. Instead, I used the Drag and Drop Page Building features. If you are wondering why I have given the screenshot, here is the answer -we are going to try and recreate this table with Elementor and Essential Add-ons.

Table For WordPress

Let’s straighten out what exactly we want to build? Imagine that you are a teacher of a first-grade class. And you have 12 students. Now you want to categorize your students according to three distinct metrics-Intelligent, Smart, and Friendly. Now there is no absolute rule that specifies that if someone is Smart they cannot be Tall!

You can conjure up similar examples in your mind, can’t you? While working on specific Data Sets you will have certain variables that fit in multiple Header Criteria. In this blog, you will learn how to present such a DataSet in a Table for your personal blog or office work.

We are going to use the Data Table element of Essential Addons and recreate the table above. Before starting you can check out the Live Demo for this element.

Click Here to See Live Demo of Data Table!

Create Tables In WordPress

We already have laid down what kind of Table we exactly want. Now let’s go straight into it.

We want to create a 3by5 Table.

First Step: Setting Up the Headers for the Table

Open The Elementor Interface. Place your mouse over the Side Panel Search Bar and type in EA Data Table. Drag the Element and drop it inside the Elementor Blank Canvas.

Now, navigate to Content>Header. By default, you will see 4 Header Cards all with the same label-Table Header. 

First, you want to remove one Header Card. Do it by clicking on the Cross Icon at the very right corner of the Header Card. As soon as you remove one Header Card, you will see one unnecessary row entry at the very right corner of the table. Don’t panic, we are going to remove that extra cell entry in the next section.

Now we want to change the Heading Text. To do so, click on the Header Card.

Each Header Card has 3 customization fields. In the first field, you can specify a new label text for the Heading Cell. Additionally, you can add an icon and image for the Header Cell. But for this example, we are going to keep it simple.

If you have followed the instruction correctly, you should have something like this.

Second Step: Specify the Content Layout

Now, let’s move onto the second customization option which is Content. Every Cell entry is represented as a separate card under this area.

But before anything else, let’s remove the extra row entry that emerged as we removed one Header Entry in the previous part.

Click on the little Cross Icon at the right corner of the Content Card and you will get something like this.

Great! Now we need to add Four More Row entries. By default, you will have only one sequence of Table Content. If you have read our previous blog on how to create a simple Data Table, you must say you already know how to add new Row Entries. But we are going to create a Varying Cell Size Data Table. This is why the process has a little extra step.

Let’s go step by step again. but for your convenience look at the table below, we want to recreate this exact table.

Create the First Row

Our first row will have two cell entries, The first cell will have a cell span of 2 and the other one will have a cell span of 1.

We already have the first row completed, but we need to remove one Row Entry. Pick the last Cell Cards and click on the little cross icon at the right corner of it.

Okay, we have the first-row entry sequence ready. But there is one unused cell space. We want one of the cells to take up the space of the unused cell. In order to do so, we will specify the first cell to take up the empty cell area.

To do so, click on the col:: Content Card for the first-row cell.

Scroll down at the very bottom of the card and you will find Colspan. By default, each Content Card will have a Colspan of 1. But for this specific example, we need to specify a Colspan of 2 for the first Content Card for the First Row. As you give a Colspan of 2, you will see the first Content Cell take up the unused space in the first row.

Now lets quickly change the Content Card Texts.

Create the Second Row

Take a quick look at the table that we are hoping to recreate. See, for the Second Row, we don’t have any cell that requires multiple Cell spans. That makes our tasks a little easier. So for the Second, Row the Content Card Sequence will be something like this.

I have changed the Content Card Texts as well. You already know how to change Card text. While you are at creating the second sequence does change their texts. Moving on!

Create the Third Row

Again, if you remember the table that we are trying to recreate, you might have noticed that the Third Row has two Content Entries. The empty cell is taken up by the last cell.

So first, lets quickly create the sequence for the Third Row.

row:: Content

col:: Jim

col:: Tom

Now let’s specify the Colspan for the entries. For this third row sequence, we want the last Content Cell Card to take up the unused cell space. 

Click on the Card col:: Tom and specify its Colspan to 2.

Create the Fourth Row

For the Fourth Row, we don’t have any cell with multiple spans. So first, let’s create the sequence for the Fourth Row. While I am at it, I will also change the Card Text.

Create the Fifth Row

Great! We made it to the last Row entry for our Data Table.

Remember, the table we are recreating has the Fifth Row with two Cell Entries. One of which takes up the Colspan of two cells.

First, let’s create the sequence and change the Content Card Texts.

Now, we want the last cell to take up the unused cell space.

If you have followed my instructions correctly, you will be with something like this.

Wrapping Up!

All the customization options and the Interface itself is self-explanatory. I hope you can agree with this statement. Elementor and Essential Addons comes with enough Elements to create an entire website. Additionally, these two plugins have enough ready-made templates. You can either use them for your website without making any changes or simply use them for inspiration.

In the meantime, here is a quick blog on how you can use Elementor and Essential Addons to recreate parts of some top-notch Websites on the internet. Click here to read the full Blog!