You’ve got to be kidding me…
That’s what your website visitors think when they stumble on a page that’s not formatted for mobile. So, if you use a lot of tables on your site, you need to learn how to create a responsive table in WordPress.
Other than a slow website, there’s not much else that will anger a web visitor as quickly as a non-responsive page. Yes, it’s easier to design beautiful web pages on a wide-screen monitor larger than most people’s TVs in the early 2000s. But the reality is that a lot of people will view your site on an only 3-inch wide screen.
Tables are a trickier part of ensuring your site works well on mobile devices. In this post, we talk about the best ways to create a responsive table in WordPress.
What is a Responsive Table?
Tables on web pages present data in an organized fashion. They’re often used to show datasets or to compare differences between products or categories.
A responsive table adapts to the size of the screen to make it easier to read on smaller mobile devices.
For example, take a look at this image of a table that will appear fine on wide screens:
But when displayed on a small screen, the columns shrink considerably. At this point, the text and numbers start breaking up in ways that make it nearly impossible to decipher.
To address the issue of readability on small screens, designers can adopt one of many ways to make a table responsive. The most popular methods are to make a table stack or make it scrollable.
In a stacked table, the cells take up the full width of the screen and stack below one another.
A scrollable table keeps the column widths large enough for the contents to be readable and allows the reader to scroll over to see additional columns.
How to Create a Responsive Table in WordPress
Creating a responsive table in WordPress is easy. You might not need to do anything at all. Many themes include styles for tables. When you’re searching for the best WordPress theme, consider looking at how tables display on the theme’s demo site. Many theme previews include a catchall page that shows all the different text styles and other elements like tables.
If you already have a theme or aren’t interested in switching themes, create a draft post or page with a table and preview it on different screen sizes. You’re good to go if your theme already includes a responsive table style.
If your theme lacks a responsive table style or you don’t like the default style from your theme, you can either override the theme’s styles or use a table plugin.
Manually Styling Tables in WordPress
You can customize your tables to be responsive if you’re handy with CSS. If a table is a one-time need, you can try styling it with in-line CSS.
You can customize your theme’s CSS files if you want to style multiple tables across your entire site. But, your changes will get overwritten. To avoid that, try creating a child theme instead. For an easier fix, use the additional CSS section of the WordPress appearance customizer. For more details on both options, read this post on how to retain custom CSS when updating themes.
Using a Plugin to Create Responsive Tables
If editing CSS makes you nervous, install a plugin to handle your tables. These plugins make creating and styling tables easier without writing any custom code.
Our picks for the best responsive table WordPress plugin are:
- Ninja Tables. This drag-and-drop table builder includes templates and many ways to customize your tables. Download the plugin.
- wpDataTables. This plugin lets you edit tables with an Excel-like interface. You can create tables or charts from Excel, CSB, XML, JSON, or PHP files. Download the plugin.
- WP Table Builder. Another drag-and-drop option makes building responsive tables fast and simple. Download the plugin.
- Visualizer. This plugin from the popular theme developer, Themeisle, allows you to create responsive charts and tables for posts and pages. Download the plugin.
Responsive Table Considerations for WordPress
The main consideration for creating responsive tables in WordPress is deciding how to best present the information. How much of your traffic is mobile? The odds are that most visitors see your site on a small screen. Your main concern needs to be how to create the best user experience for them.
In some cases, that may mean rethinking the need for a table. For example, could a comparison of two or three categories be better displayed in a bulleted list?
If the information warrants creating a table, you have to decide how to implement it. If your default theme doesn’t handle tables well, you should consider how often you’ll use tables before installing a plugin.
In our post answering how many WordPress plugins are too many, we discussed the dangers of overloading on plugins. Plugins can slow your site down. If you’ll only have one table on one page, it’s probably not worth installing a plugin. Try to handle that with CSS if you can.
Testing Your Responsive Tables
No matter which method you use to create responsive tables in WordPress, you might want to try it on a staging site first. A testing environment allows you to try out changes to your CSS or install and configure new plugins without impacting your live site. Learn how to create a staging site for WordPress. All Pressable clients get a staging site. It’s just one of the many benefits of hosting with Pressable. To learn more about our fast, secure and simple hosting platform, schedule a custom demo today.
Zach Wiesman
Zach has 12+ years of experience with WordPress, from creating and maintaining client sites, to providing support and developing documentation. A knack for problem-solving and providing solutions led Zach to pursue a job with Automattic providing customer support in 2015 working with WooCommerce support, and now Zach has recently joined our team here at Pressable. Outside of work, Zach enjoys spending time with his family, playing and watching sports, and working on projects around the house.
