• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

The Case Against Responsive Tables

Bhagwad Park

Published on: June 26, 2019

Categories: Website Development 0

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!

Bhagwad Park Profile Picture
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!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA