Black Friday Deals are Here Get Massive Discount NOW

How to Create Stackable Tables that Can be Shown in Different Devices

  1. How to create a stackable table?
  2. Showing tables in different devices
  3. Additional customization

stackable tables

In this era of big data technology, using dynamic data tables, readers can easily visualize any kind of large data set. Whatever you’re looking at the data set showing on a particular table, sometimes, it’s easier to see the data in a stacked table form instead of showing them in an unstacked tabular presentation.

But creating dynamic data tables in a stackable way on a spreadsheet is easy as compared to making it on the web. To simplify the whole process in creating stackable tables, a solid WordPress table plugin can do a lot.

1 new NT BG

Ninja Tables

Fastest Selling Table Builder with Advanced WooCommerce & Google Sheets Integration

In this article, I will show you how can you craft advanced stackable tables using a quality WordPress table plugin with no time. Before going into the main discussion, let’s start with the basics.

What are the stackable tables?

Stackable tables are a variant of the generic table kind. A standard table compares individual data points with each other. Whereas, in a stackable table, parts of the data are adjacent or stacked/nested vertically or horizontally. Each of the tables displays a total amount, broken down into sub-amount.

How to create a stackable table?

Creating a dynamic stackable table is pretty much simple if you use a quality WordPress table plugin. To demonstrate the whole process here, I’m using the Ninja Tables WordPress table plugin for serving this specific purpose.

Step 1: Set up Ninja Tables

To create a stackable data table, at first, download and install the latest Ninja Tables plugin after purchasing it from the official website of the plugin. Once you’re done with the successful installation, you will find the plugin in the left sidebar of your dashboard.

Step 2: Creating a table

Once you’re done with the set up of Ninja Tables, now, you need to start creating a table that you want to make stackable. For demonstration purposes, I have created a general table earlier with Ninja Tables. now I will show you how can you make this table stackable.

That’s pretty simple…..!

I have created a table named Student Table with 5 rows and put some data on it. Here is the current table preview-

stackable tables

Now, look at the backend of the table created by Ninja Tables-

stackable tables

Step 3: Making the table stackable

Now, you have a table and to make this table stackable, click on the Table Design tab on top of the plugin’s interface/dashboard.

stackable tables

In Table Design tab, you will find the right sidebar panel, you will get “Stackable Table Configuration” option. Right under this, you will get a checkbox to make any table checkable.

stackable tables

If you enable the option by checking it, you will see that 2 additional sub-sections will be available with multiple functionalities. Then click on the Update button to see the changes.

stackable tables

After enabling the “Stackable Table Configuration” option, the respective table changed into a stackable table. Let have a look at the preview for your better understanding.

stackable tables

This is super cool..! Now, you have made the table checkable without facing any hassle.

Showing tables in different devices

Ninja Tables plugin allows you to make your stackable table more personalized. Even if you want to customize the created stackable table, you also can make it happen with Ninja Tables. Moreover, this stackable table can be created in a responsive way as you can display through it with the different targeted devices.

The table created above is based on desktop users as you can see the Large Devices option is checked under the Target Device section(above screenshot). If you want to make the table responsive in all the devices, make sure that you have checked all the options under the Target Device section.

stackable tables

For instance, you will get a chance to make the table responsive according to the mobile, tablet, laptop, desktop devices using the sub-option of Target Devices. Now, your table would is responsible for all devices.

You can also change the appearance of the stackable table using the Stacked Appearance option. Under this option, you can hide column headings, hide internal borders of the respective stackable table.

1 new NT BG

Ninja Tables

Fastest Selling Table Builder with Advanced WooCommerce & Google Sheets Integration

Additional customization

Even if you want to customize/modify any information that you provided in the table, you can do it easily using the other options like Table Colors, Others in the same section. Moreover, you also can have advanced options like Table Configuration, Frontend Editing, Custom CSS, Import-Export out there in the plugin. To learn more about the Ninja Table usage, you can head over to the user-guide of the plugin from the official website of the plugin.

I hope this article helped to know about how to create a stackable table using a quality WordPress plugin.


If you haven’t subscribed to our YouTube channel, do subscribe to our YouTube channel to get WordPress-related tips and tricks. Also, follow us on Twitter and Facebook. You also can join the popular Fluent Form Community on Facebook.

Sazzadul Bari

Hi, this is Sazzadul Bari, Digital Marketing Strategist at WPManageNinja. SEO content writing, outreaching, link building, and lead generation are my specializations. And when I am not drooling over WordPress plugins and updates, you'll find me enjoying sports or going through my favorite books.

Leave a Reply