There is a huge debate on HTML tables and when it’s okay to use them. This post doesn’t deal with that. I’m going to assume that – like me – you’ve got a table, with at least somewhat tabular data, and you need to make it look pretty (aka functional) on phones and tablets. There’s a whole slew of options and none of them are perfect for every situation. Here is a roundup of some of the current methods.
Foo Plugins – Foo Table
- http://fooplugins.com/plugins/footable-jquery/
- Method: can hide columns entirely, or allow them to be selectively expanded/collapsed
- Availability: free general jQuery plugin & free plugin for WordPress
- uses CSS breakpoints
- configure using data attributes on the table tags
- themable, sortable, filterable, paginatable (okay, so that last one isn’t really a word)
jQuery Mobile – Table Widget
- http://api.jquerymobile.com/table/
- Method 1: Reflow mode – Re-formats the table columns at narrow widths so each row of data is presented as a formatted block of label/data pairs.
- Method 2: Column toggle mode – Selectively hides columns at narrower widths but offers a menu to let users manually control which columns they see.
- Availability: free CSS/jQuery plugin
Filament Group – A Responsive Design Approach for Complex, Multicolumn Data Tables
- http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/
- Method: dropdown menu with checkboxes to enable/disable columns
- Availability: free CSS/jQuery
Zurb – Responsive Tables
- http://zurb.com/playground/responsive-tables
- Method: creates horizontal scrolling within table so all values can still be compared
- Availability: free CSS/jQuery code
- doesn’t unnecessarily hide data
- still lets you compare rows, but does require horizontal scrolling
John Polacek – Stackable.js
- http://johnpolacek.github.io/stacktable.js/
- Method: creates a copy of the table that is converted into a 2-column key/value format
- Availability: free CSS/jQuery code
- very readable output, but hard to make comparisons between entries
Mobifreaks – Responsive and SEO Friendly Data Tables
- http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/
- Method: use div elements and style them like table elements in the CSS, then use media queries to convert to 1-column key/value format
- Availability: free CSS code
- very readable output, but hard to make comparisons between entries
David Bushell – Responsive Tables (2)
- http://dbushell.com/2012/01/05/responsive-tables-2/
- Method: flip the table on its side so the headers are always showing on the left; horizontally scroll the data
- Availability: technique posted
Major props to Chris Coyier for his roundup, which can be found here: http://css-tricks.com/responsive-data-table-roundup/
Leave a Reply