How to Create Responsive Tables in WordPress
HTML tables, once commonly used for webpage layouts, are now a layout headache for many web designers. Tables often work best with fixed widths, which means they can wreak havoc on otherwise pixel-perfect responsive website designs. So what’s a WordPresser to do?
The first thing to do with tables is to use them sparingly. Tables should be used for tabular data and nothing else.
Not sure if a table is a right option for a specific data set? Put it to the spreadsheet test. Would this data make sense presented in a spreadsheet?
If so, an HTML table is an appropriate choice. If not, consider using a list or some other element to present the data.
Once you’ve identified a table as the best option, what then? Make sure it renders beautifully regardless of the size of the device viewing the table. Easier said than done, right?
Fear not. In this tutorial, you’ll learn about five different tools you can use to make HTML tables beautifully responsive.
Continue reading, or jump ahead using these links:
- How WordPress Handels Tabels
- Make Tables Responsive Manually
- Using a Plugin to Create a Table
- Which is the Right Option for You?
How WordPress Handels Tabels
There isn’t a straightforward answer to that question. The way tables are presented in WordPress varies from one theme to the next because table styling is handled by the CSS that ships with each theme.
So tables are rendered according to the CSS rules included with the active theme. Switch themes and the way tables are rendered will change.
Some themes have better built-in support for responsive tables than others. TwentySixteen, for instance, does a pretty good job of dealing with tables as long as they only have two or three columns filled with short bits of data.
However, not all themes are as thoroughly designed as TwentySixteen.
Let’s have a look at how TwentySixteen handles an HTML table when rendered on a handheld device. Here is a bit of HTML that will produce a table with five columns and six rows.
It shows the most popular content management systems according to W3Techs.
When dropped into a post with a TwentySixteen child theme activated, that table looks pretty good viewed on a laptop or desktop monitor. It’s clear right off the bat that TwentySixteen includes thoughtful table styling.
We can use Chrome Developer Tools Device Mode to see how things look on a smaller device.
Well, that’s not ideal.
The TwentySixteen developers did include CSS styles that make tables responsive. If this table only included two or three columns it would probably look pretty good.
However, this table includes five columns which is too much for the default table styling included with TwentySixteen.
Let’s fix this table up.
Make Tables Responsive Manually
To make tables responsive, we need three things:
- A properly formatted HTML table.
- A simple CSS ruleset will be triggered when the display shrinks below a predetermined width. This bit of CSS will rearrange the table rows into columns, hide the row of heading cells, and add the contents of the heading cells to each data cell.
It’s important to note that the table must be properly formatted for this to work.
The script is designed to look for heading cells in a
thead element and assign them as HTML attributes to the data cells in a
If you create a table that doesn’t include
tbody elements the code won’t work.
And here’s the applicable CSS.
The simplest way to use this code is to add it right to the post or page where the table appears. You can do that by dropping the CSS between
The result is actually very nice. Here’s how the table looks when previewed with the iPhone5 preview in Google Chrome.
A Better Way to Do Tables
If you only ever use this code once, adding it right to the post or page where the table appears is fine.
However, if you’re going to use tables on a regular basis, a better way to add the code is to embed it right in the theme files.
Adding the code right to your theme really isn’t that hard. You can do it in just four steps.
- First, make sure you’re using a child theme to avoid losing your work the next time you update your theme.
- Second, copy and paste the CSS into the theme’s style.css file.
- Fourth, use the
in_footerto true while you’re doing that.
The trickiest part of the process is adding the script file with
wp_enqueue_script, but I can make that step a little easier.
Your functions.php file may look a little different, but this gives you an idea of what the enqueue function should look like.
WPMU DEV writer and WordPress developer Daniel Pataki has covered the
wp_enqueue_script function in-depth on this blog. So you can refer to that tutorial–as I did–if you struggle with this step.
Using a Plugin to Create a Table
Of course, maybe you don’t want to go to all of that trouble and would just prefer to use a WordPress table plugin.
There are certainly plenty of table plugins in the WordPress plugin directory, many of which claim to make tables responsive.
To save you time searching, check out our post on choosing the best WordPress table plugin which compares different responsive table plugins that do a good job of rendering tables on devices of any size.
Which is the Right Option for You?
Well, that depends.
How often do you use tables?
What sort of data sets do you present in HTML tables?
Do you want a plugin that does all the heavy lifting, or do you like to be hands-on with your website’s code?
How you answer those questions will help determine which of these tools is the right one for your WordPress website.
- Do you want a powerful table tool that you can use to create complex tables that are sortable and searchable? Do you deal with large data sets and fixed-width tables that you want to make scrollable without breaking the responsive design of your site? Then choose one of the plugins we have reviewed in this post.
- Do you like poking around in code and want a hand-crafted solution that is light on resources and looks beautiful? Try out the manual implementation, and tweak it to make it your own.
- Are you just looking for the easy button? Take a look at Automatic Responsive Tables or Magic Liquidizer Responsive Table. One of these two will make you happy, I’m sure.
Tables don’t have to look terrible on smartphones and tablets. With a little forethought and effort, you can use HTML tables on your WordPress website and have them look great on every device.Tags: