Last week I had to create a comparison table using WordPress for a certain reason. Initially, I couldn’t find anything congenial within WordPress about creating an interactive table which is responsive. If I had to create a table, I would have had to code it entirely in HTML with numerous <TABLE>, <TR>, <TD> tags. As an example, the code behind a sample table would look like this:
|Column A||Column B|
|Data 1||Data 2|
The Code Behind The Table:
<TABLE BORDER=”5″ WIDTH=”50%” CELLPADDING=”4″ CELLSPACING=”3″>
<TH COLSPAN=”2″><BR><H3>TABLE TITLE</H3>
But this is not a practical approach. Every time I intend to create a table, it will take up so much of my time and effort, which is clearly an unnecessary hassle. And as I was dealing with a complex comparison table, I thought of handling it in a smarter way. So, I decided to take a look at different WordPress plugins regarding this issue.
I found several plugins which are able to solve the problem, but with a major limitation; except one. Before telling the name of that particular plugin, I would like to elaborate on the major problem that I found while studying on different table plugins for WordPress.
The inconvenient setback that I have noticed in almost every plugin is, the tables created with these plugins are merely responsive in type and they are not compatible with all kinds of devices. Good thing is that I found the Ninja Tables plugin responsive and made my respective responsive table by choosing this awesome tool.
A comparison is one of the toughest activities users perform on the internet. In most of the cases, it’s an obvious step your expected visitors will perform before buying a product, signing up for a membership, or requesting a quote. And that’s where comparison tables jump in to make our life a bit easier by visually representing to us a large amount of data.
Two types of comparison tables can be created for business purpose. One is a static comparison table, and the other is dynamic. Dynamic comparison tables are more suitable and interactive, which is appropriate for a healthy business environment. It allows users to interact directly with the services they want.
On the other hand, static comparison tables serve no other purposes than just advertising the product as a whole. The user can not interact and can’t take instant action using this type of table. And this might seem like bad user experience to your website audience.
Creating a comparison table with Ninja Tables: A step by step guide
Now, I will present to you a step-by-step guide of how you can create a responsive interactive comparison table for your business purpose that must be dynamic in type. Let’s have a look.
For instance, I am giving a price list of a web hosting service provider company. This table will show you how the company interacts with its clients simply by displaying a pricing table given below.
I created the table simply using Ninja Tables plugin. Most importantly it is responsive in type. You can check the responsiveness by simply resizing your browser window to have a quick overlook if you are browsing from a desktop or laptop.
Now I will be showing you how as a WordPress website administrator or editor you can create such interactive tables in WordPress.
First of all, you need to download & install Ninja Tables plugin. For detailed know-how about the installation process: [readme].
After activating Ninja Tables, just click on the “Ninja Tables” to start its operation. Then a page will appear with the “Add Table” button.
Clicking on the “Add Table” button will open a dialogue box containing the necessary information to fill up for creating a table. After filling the form, click on the “Add” button. Then, a table will be created with its column options.
A page will open dynamically with a form to fill the necessary information about the columns under the respective table. Each form represents one column of that table. After filling out one form, click on to the “Add column” button to move on to the next column.
A column will be created named Plan 1 under Hosting Service table. We can click the “Add Column” button to add more columns to the table.
This way, you can create one more column into the table. The interface will look like this.
Consequently, the interface looks like this.
Now, you have to add data in the cells of that table. To do so, click on the “Table Rows” option, then you will have a page with ‘Add Data” button. Click on that button to add specific data to the columns row by row.
A dialogue box will appear to fill up the required information for the column.
There will be a dialogue box with an input form to fill up data into the table. You can add images or texts in the form field.
Here is the text editor view of the given data.
After filling up the form, just click on the “Add” button to include all the given data in a row. You can edit, delete, add more data by clicking on the respective icon. In this way create few more data increasing row. The interface will be like so then.
Now, in the same way, we will add ten more data to column into the table and we can edit our given data by clicking the update button. Shortcode can use by clicking the text button to customize any specific item. We will change some data by using different color schema. Then click on the “update” button.
You can use different color combinations to decorate text color.
The preview of this interface will be like so. It seems pretty cool to look at the table. This table is responsive in type. This is how we can create a basic table structure.
This is how I created the comparison table as a whole. In this article, I wanted to make it clear that in WordPress, by choosing the right plugin anyone can perform a heavy task very smoothly. Here in this piece of writing, I showed how the Ninja Tables plugin makes things easy as an example. It made my task very smooth and comfortable. Most importantly, the good thing is that this plugin is fully responsive in type in the market.