How To Build Responsive Tables In WordPress

For a content platform built around articles and posts, WordPress does a pretty lousy job when it comes to displaying tables. Granted, they’re not usually part of standard articles and posts, but they add so much more to content, that there really should be a dedicated widget for them in the default editor. Perhaps it’s a legacy of WordPress’s past, in a time when content wasn’t as detailed and complex as some of the stuff we find on the web these days.

Luckily, plugins step in to fill the void. In this article, I’ll review a plugin called “Table Maker” instead of the usual “TablePress” plugin. The latter is everyone’s go-to tool for tables, but I’m here to present an alternative that I find works better in a lot of situations. The tables it outputs are responsive, and look very “clean”.

Downloading and Installing Table Maker

Table Maker is a regular plugin on the WordPress store. You download and install it as usual. The one exception is if your WordPress installation uses MariaDB instead of MySQL. Most of the time, MariaDB is a drop-in replacement for MySQL, but this plugin uses an expression called “rows” which is a reserved keyword in MariaDB.

The GitHub version of this plugin addresses this problem, and you can download it from here. A word of warning though. If you already have existing tables with the older plugin version, the new one here will erase your existing tables.

Creating Responsive Tables

Once the Table Maker plugin is installed, go to your WordPress dashboard, and click the “Table Maker” menu on the left-hand side. This interface allows you to create a new table by clicking “Add New” like this:

In the next screen, we create our actual table. The fields are pretty self-explanatory. Give it a title, and enter the values in the table as shown here:

Note that you can choose the “Responsive style” for the table. You can stack either the rows or the columns. You can also choose the default color for the table headers. Finally, it gives you the shortcode to use when you want to insert the table into the WordPress editor.

Save your changes and you’re done. Now when you want to insert a table into a WordPress post, use the shortcode like this:

And this will give you the output:

It’s that simple!

Why Use Table Maker Instead of TablePress?

TablePress is a fantastic plugin. It has a lot more options, and flexibility. I even find the process of inserting, resizing, and re-arranging rows much more convenient than Table Maker. So why not use TablePress instead?

TablePress Requires an Additional Plugin for Responsive Tables

By default, TablePress tables are not responsive. This means that they won’t automatically re-align on a smaller screen. To add this functionality, you need to download an additional plugin. Table Maker on the other hand, has responsive design baked into it from the start.

I Prefer the Table Maker’s Responsive Style

When you have a responsive table in TablePress, it looks like this:

Whereas the same thing in Table Maker looks like this:

It’s a question of personal preference, but I prefer the latter by a wide margin. It’s cleaner and makes a more efficient use of space. But that’s just my personal opinion. YMMV!

Simpler Interface

It’s the quandary with all sophisticated tools. The more features you pack into something, the more difficult it becomes to use it. Table Maker in my opinion, has just the right number of features for everyday use. It doesn’t have complex Javascript data options for sorting, and pagination.

But sometimes, all of that just gets in the way. If you’re looking for a simple table plugin that outputs responsive tables in a neat manner, then Table Maker is something you should look at closely!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!