Recently I’ve been thinking about tables a lot. Not just the wooden kind, although I’m thinking about those too, as I need a dining room table (oh, and a dining room). But mostly the tabular kind of table. We have a lot of tables at CIPD (the tabular kind). As we move away from just publishing reports in PDF, to HTML on a responsive web site, and e-books, we need to find a way to display the tabular data in a more readable format.
Why tables are a pain
Tabular data presents unique presentational challenges on smaller screens: tablets, ‘phablets’, and especially smartphones.
The reader can zoom out and see the whole table, but the text is too small to read. Visual relationships between headings and cells, and between neighbouring columns, are crucial to understanding tabular data, so readers must zoom in to the point of readability, and then scroll vertically and horizontally to understand the context. Tabular data presents unique presentational challenges on smaller screens: tablets, ‘phablets’, and especially smartphones.
To control the often chaotic reformatting of HTML tables on websites and in eBooks, tables are often provided as image files. However, this creates an accessibility issue. Tables as images (in fact all images) can’t be read by screen reader software. It is unlikely that the fallback of alt text (
image alt=" ") is sufficient to fully explain the context of the table. (See my forthcoming blog on Web Accessibility for more on this subject.)
Why tables are a pain for CIPD
Tables are a particular problem for CIPD’s reports, in that they rely heavily on them to present data. The example below is taken from Absence Management Survey 2013 and is typical of the use of tables in CIPD reports.
Responsive design is a web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors) Wikipedia
Responsive design provides a solution for optimizing websites according to the screen size (see my blog post Responsive Web Design: the basic principles for more on this issue) but until very recently still struggled to come up with a suitable solution for the presentation of tables.
The best solution out there
Over the last couple of years web designers have been experimenting with the best way to use responsive design techniques to come up with a way of presenting tables that display comfortably at a wide range of screen sizes and preserves the table structure so that data can still be compared across columns.
… most of the time, the first column is the unique key for a table. That provides the reference for the other columns, while the column headers provide the legend for what everything means. With that in mind, we wanted our responsive tables to have that first column available at all times.
This is a schematic of how the table changes from a larger screen to a small one. Basically, we take the first column and pull it out of the table element, positioning it over the table in its own element. Then we allow the table itself, minus that first column, to scroll under it horizontally.
From Zurb.com (http://zurb.com/article/982/a-new-take-on-responsive-tables).
Zurb have tested the code on the following browsers: iOS, Android and Windows Phone 7, Chrome, Safari and Firefox. “One caveat is that because Android 2.3 doesn’t support scrollable divs on the page, the scrolling won’t work on those devices. Android 3 and up does support this, so it’s not an issue on newer Android phones.” Currently this means that this functionality is not supported on around 14% of phones, however, this will continue to decrease as older models are replaced. (Android’s market share is [Sept 2013] 55%; Android 2.3 and lower currently represents [as of Dec 2013] 25% of Android devices.)
Other notable solutions
Alternative responsive table design solutions can be found at:
This solution shows only the essential data on small screens; shows the essential data plus some optional data for larger screens; and shows the full data on desktop/laptops. But this does mean that SmartPhone users do not get the full set of data; it also means that editorial decisions need to be taken as to the relative importance of each of the columns.
This solution abandons the grid layout of the table altogether on smaller screens and makes each cell its own line.
This table builds a pie chart from the table data when it is displayed on a smaller screen. Clever, but not all tables are suitable for this kind of treatment.
This solution hides the non-essential columns on smaller screens, but also provides a dropdown menu, where the reader can choose which columns to re-enable, should they so wish.
Some of these solutions may be appropriate in particular circumstances and for particular types of data.