Responsive tables using Stacktable

By Geoff Muskett

Having recently re-skinned WTW Cinemas booking system to bring it inline with the styling of the website, developed by myself and Mackie Studio, I can highly recommend Stacktable as a solution for responsive tables. You can view the live work by visiting the WTW Cinemas site and use the Quick Book module to select a random film, click GO you’ll be taken straight to the booking system. Resize the browser and you’ll see the awesome results of Stacktable.

HTML tables for tabular data is a forgivable evil

WTW are using a tried and tested, extremely robust and secure system to handle the online booking process. The templates just needed a little updating, so out went the table based layouts, in came new responsive ones using web standards. All good, however the main function of the system is handled with tables, and there’s no changing it. Sounds bonkers, but it’s not, it could certainly be argued that tables are entirely appropriate for the job in this case, after-all, its tabular data.

The job in hand…

My task was to develop a solution that made it clear which cinema site the user was booking for (they have 4 cinemas), that looked good, and was responsive – which was likely to be the biggest challenge due to the multi-column wide tables that are core to the whole system.

Thanks, CSS-Tricks

During research I stumbled up this responsive tables roundup post by Chris Coyier. Some clever solutions indeed, I especially like the idea from Scott Jehl of displaying the data in a chart on small screens. However thats not appropriate for a booking system. Several of the other solutions suggest hiding the less important columns, which again is not appropriate for a booking system – even with the clickable option for showing the data.

Two solutions that had potential were Zurb’s technique of a fixed left column, and Stacktable.

First up I tried Zurb, great concept and worked well, basically the left column is static while the rest of the table can be scrolled left and right. In practice, my colours and border-bottom’s didn’t quite line up, and I didn’t feel it was clear enough that there was extra cells that you could scroll to see. Both of those issues I think were fixable with a little tweaking, however having data not instantly viewable wasn’t the right route to go.

Stacktable, a great jQuery plugin for responsive tables

Stacktable basically “creates a copy of the table that is converted into a 2-column key/value format“. Which means there are two versions of the same HTML table, one is the original, the other is optimised to two columns. The appropriate table is displayed based on browser width with media queries:

  • Smaller screens: show the the two column version, hide the large
  • Larger screens: Hide the two column, show the larger version

 

It has small detriment to load time, but we’re talking fractions of a second, and the pages are extremely light in every other way – barely any images, use of icon font etc. The tables in questions are generally less than a handfull of rows by 10 columns or less. The result versus extra fraction of load time is well worth it. In a swift 0.327seconds (using Google PageSpeed tool) the page is fully loaded with the two versions of the table:

Large screen table

Responsive HTML tables for larger screens using Stacktale

Small screen version of the table

Responsive HTML tables for smaller screens using Stacktale

Choose the right responsive tables technique

I think you’ll agree this is a pretty slick result, especially as the above is only one example from the booking system. WTW’s system generates quite a few different tables, some of which were naturally responsive in that they were two flexible columns and didn’t require much treatment, others are quite complex. Stacktable handles most of these tables extremely well.

On the rare occasion I’m working with tables, Stacktable will be my go-to responsive solution, however if the tables I’m working with are simple and consistant then there are quite a few potential solutions. The best solution depends on the data being displayed, if it is appropriate to hide or show content using <th>’s as headings, then awesome, FooTable or Zurb’s technique would be a great fit. If the table is displaying results, Scott Jehl’s pie chart solution is genius, I almost want a reason to use it.

All these ideas add up to a win for creative thinking. One of the most traditional features in HTML can now be dragged into the modern world of responsive web design. Score.

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.