Let us show you the secret of CRO….

Simply put an eye-catchy pricing table on your site & increase the conversion rate by 20%. 

Yup, as simple as it sounds!

That’s why marketers and developers love to use the custom table on their websites and e-commerce site. They realize that organizing data and information is a skill, it’s a game changer.

Now Thinking to add a table on your WordPress Table?

Great! The good news is There are several ways to create a custom table on WordPress. Even if you’re not a tech nerd, you can create a stunning-looking table for your site.

Let’s explore how to create tables in WordPress from scratch.

Top 3 Reasons to Incorporate a Table on Your Website

Allows the user to see a large amount of info in one place:

Who likes information overload?

We guess No one.

It’s chaotic, confusing, and overwhelming. 

When there’s a lot of information that needs to be displayed on your site, tables help organize it all into neat rows and columns. Having a table means you can see everything at a glance and quickly find what you’re looking for.

Make your site Visually Appealing

Tables create a structure that is pleasing to the eye. 

It gives your website an organized appearance. By displaying information in tidy rows and columns, you’re giving your site a chic and professional look to your audience. 

Leads the reader to move forward to purchase. 

Ok, Let us explain how…..

You probably heard that there are 5 stages of the customer buying process. Problem Recognition>Information Search> Evaluation of alternative>Purchase Decision>Purchase (call to action).

Now the fun part:

From Information Search to call to action, pricing tables help the user to hit that final purchase button.  Now get it why do tables do wonders in conversion?

So, How to Create Tables in WordPress to organize bulky data well-Organized

There are two main methods to insert Tables in WordPress.

  • Create table in WordPress with plugin
  • Create table in WordPress without plugin

Here, we’ll go with first method to add a table in WordPress. However, if you want to create table without plugin check this.

Using a plugin is probably the easiest way to create a custom table in WordPress.

Why?

These plugins are designed in a way that anyone can customize them easily. And the great news is there are tons of WordPress table plugins (both Free and Paid) to create such a table.

In this tutorial, we’ll use RioVizual to create table in WordPress.

Why Riovizual?

Well, it is the drag-and-drop WordPress block table plugin that allows you to easily create and customize tables directly in the Gutenberg block editor.

Yup, no more back-and-forth table-making and place code.

The Riovisuzual table itself is a block so it integrates so well with the block editor. Riovizual allows the user to create a responsive table with a full site editing experience within the content. You have two options at hand to create the table-

  • Make from scratch
  • Or make the table from the template.

Installing the plugin and getting ready to start

First, you need to install the plugin on WordPress. Go to Dashboard> Plugins> Add new.

Now type Riovizual in the search box. All you have to do is activate the plugin.

We’re all set and ready to create the table now. And a little disclaimer- Rovizual is only compatible with the Gutenberg block editor.

Let’s Make the table from scratch with Riovizual

In most table plugins (For example, Ninja Table or TablePress), you need to create the plugin separately and then embed the shortcode of the tables into posts or pages.

But Riovizual will directly create a table on the site pages and posts.

Step 1: Select the table from Toggle block

Click the “+” button first. It’s called the Toggle block inserter.

Just scroll a little bit, and you will see the Riovizual table builder. You can also get it on the Add block (the little plus on the right).

Step 02: “Create New” option

If you click the table builder, you can see the “Build from Scratch” option and some pre-made templates. Click the “Build from Scratch” to create a brand new table.

Step 03: Header, Footer, Table style, Cell border

First, you will see an interface like this. 

There are header and footer options here. You can put the header and footer here. You can also change the table styles on stripes or keep it normal by default.

If you want to be a little experimental with Cell Border, Riovizual also keeps the option for you- collapse or separate.

Step 04: Create the main table structure by placing the number of columns and rows

You need to put how many columns and rows you want. By default, there will be 3 columns and 3 rows. 

You can customize the row and column as per your need and click the create table button. Let’s say we take 5 columns and 7 rows.

Did you notice that when you change the column and row number, the preview table also updates automatically? Yes, it’s such a great feature that will give you a glimpse of what the table will look like.

Step 05: Exploring the customization option

The main structure of the table is created, right? If you click the setting on the right corner, you can see the block options to customize the table.

Click the setting button to explore more options to customize the table. 

By default, the table is in “Global Setting” mode, which means it will affect the whole table when you make any changes here. On the other hand, if you want to work with only any particular cell, you can do it in “Cell Setting.” 

Keep in mind to change a particular cell, you must select at least one cell in the table. When no cell is selected, `Global Settings` will automatically be active.

Step 06: Insert New Columns and Rows

One great thing about this plugin is that you can easily insert new columns and rows by clicking the “+” button on hover. 

Also, you can do the same things from Block Control “Table Settings”. Here is how we can achieve it.

Step 07: How to Delete the Full Column or Row if Needed

Here is how to delete a full column or row  in one click.

Step 08: Merge and Split functions

Merge and split functions are super smooth. First, press and hold “Ctrl” and select the cells you want to merge.

You can also give the range by selecting the “Shift” button and merging all of them.

Now let’s see the split option. You can split the cell only when you merge it before. For that all you need to do is select the merged cell and click split merged cell from the “Table icon in Block Control Panel.

Step 09: Trying all the elements of Riovizual & create the table

Now let’s put all the elements. The plugin currently has five elements- Text, Image, Button, List & Icon. And we will use all the elements to create a comparison table. Click the Add Elements section in the top corner. By default New Table comes out with text element in every cell. 

#1 Text: Adding text is pretty straightforward. Just add the text to the box.

Doesn’t look good without the header, right? Let’s give the table a header.

#2 Image: Now come to another main aspect of the table- The image. Click “Add Elements” and select Add Image.

When you click the “Add Image”, there will be a popup box to add an image. Select or Upload Media, put alt Tag, and just click Use the Image.

You can also add the image from the external URL from the Cell setting. Cell Setting> Content> Use External URL. Through this process, you can add all the other images too.

#3 Icon: After the image, we’ll learn how to add another element- Icon. The process is again the same; click the “Add Elements”>Icons.

When you click the Icon, the interface will be something like this. You can also change the icon from the “Icon content option”.

You can also change the icon (there is a vast library of icons on the plugin), color, background, alignment, etc., from the Icon setting options.

#4 List: By far, we have used 3 elements on our table; it’s time to add the fourth one- List. You know the drill. Go to Add Elements> List.

Add the text on the list icons. You can add and write the text from the lists content option cell setting, which you will find in the right corner.

#5 Button: Last but not least, use Button on the table. As usual, Setting>Add button.

Here’s how the button will look when you add the button. You can also customize the button from the button design option on the “Cell Setting” like Button color, style, font, background etc.

Let’s add the text on the button and place the price of the smartphone one by one. One standout feature of this Riovizual plugin is the Hover option. You can choose Hover (Move the mouse over the element table rows to see the effect) from the sidebar setting option and highlight the section or element.

You can also put the URL Link on the Button (for example, an Amazon Affiliate link). And Bingo, we have created an amazing responsive table with the Riovizual from scratch. Here is the final look.

Another awesome thing about Riovizual plugin is you can customize the design and style for different devices. 

Make the table from the template

Creating the table from a template is easier. You need to select the table block as usual. And then, instead of creating new, you have to choose one of the templated tables and click import.

Now place the text and numerals on the table. Here is a snapshot of a comparison table-

Another great feature of this plugin is you can see how your table looks on different devices while publishing the content.