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 the 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.
How Are Tables Handled by WordPress?
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:
This article was written by Jon Penland and originally published on WPMU DEV Blog.