The Case Against Responsive Tables

When designing websites for mobile devices, you’ll keep finding unusual use cases that you didn’t plan for. No matter how responsive your theme is, you’ll need to decide how to handle a variety of scenarios. Tables are one example. I’ve long struggled with the conundrum of how to display them on mobile devices. Should responsive tables “collapse” on a smaller screen? Or should they scroll?

This is a question of taste of course, and each person will be right in their opinion. However, I’ve uncovered a real problem with collapsing tables, that I believe is universal. And it has to do with Google’s mobile-first indexing.

Google Mobile-First Indexing is Bad for Tables

For quite a while now, Google has been preparing us for mobile-first indexing. It means that when the Googlebot spiders your website, it will first do so with its mobile bot, instead of the desktop one. This reflects the increasing use of mobile phones in general. People now browse a lot more on their phones – often exceeding their time spend on traditional desktop computers.

I’ve argued in the past, that this calls for a single source of web code that renders well screens of all sizes. However, it presents a unique problem for tables.

Since the Googlebot spiders your table as a mobile device, it will encounter your “responsive” version first. So if you collapse your columns into rows, that’s what Google will pick up. By itself it’s not really an issue – unless you’re going for a featured snippet.

In one of my early pages, I won the featured snippet for my table, only to find that it rendered all weird in the search results. I was happy of course, but I didn’t understand why it was showing that way. Until one day, something clicked, and I figured out what the problem was. Then I tested it by removing the responsive table design to simply “scroll”, and my featured snippet started to show as it should.

“Scroll” is the Best Responsive Design to Use for Tables

Based on the above, I realized that the best way to make tables responsive is to allow them to “scroll” horizontally. This is not ideal. I personally think that many customers will find it easier to read “row stacked” tables when the number of columns is too large to fit on a small screen. But the cost of losing a potential featured snippet is too high for me.

It’s weird that the most popular table plugin “TablePress” doesn’t have scrolling enabled by default. I’d previously recommended TablePress because it allowed us to customize the <caption> component. But if you want it to scroll, you need to install the TablePress responsive plugin as well. Which make it three plugins just to display everything properly!

So Which Table Plugin to Use Instead?

Because of this, I’ve gone back to my previous recommendation of Table Maker.

Note: The version of TableMaker on the WordPress plugin store plays weird with MariaDB databases like those used by NameHero. As a result, you should download and install the GitHub version instead.

Unlike TablePress, Table Maker’s tables are all scrollable by default. And you don’t need to install a new plugin to make them responsive by stacking the columns either. If you don’t mind getting messed up featured snippets, I suggest Table Maker over TablePress simply because it’s more lightweight. Something doesn’t sit well with me if I have to install three plugins just to display a table.

Bottom Line

Tables have always been problematic for me. And it becomes worse on mobile screens. I used to previously recommend the TablePress plugin, because of the ability to add <caption> tags, but the additional bloat is too much. Table Maker is now my plugin of choice, and it has scrolling enabled by default, which makes Google happy!