Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

Modern thinking on web design is shunning the much loved table tag in html.   The most compelling reason is to make it easier to accommodate responsive designs, but there are additional reasons as well.

For many the last bastion for the table is when displaying a list of records, after all tabular data should still fill at home in a table, butt if you allow this exception you bump into challenges leading to the table tags fall from grace in the first place.

The problem is that tables require a rigid structure.   You need to be able to scan down a column of data to compare values.    You need to be able to easily keep context with a key column as you scan across a row of related data.    This does not lend itself well to smaller screens.

Zurb Foundation includes provides an approach to accommodate responsive tables using JavaScript to make the first column “sticky” and the rest of the columns will scroll on smaller screens.    This way you are less likely to loose context.

CSS Tricks also has a running commentary on various other approaches that have popped up.   Some approaches are better than others depending on you needs and project requirements.    Some relying on allowing the user to identify which columns are important and which can be hidden.     Some rely switching from a traditional table to duplicating the headers for each row and turning the table on its side when space becomes an issue.   One option showcased actually switches from a table to a graph at a key break point.  The key thing is that you get a regular table when you have the space but something that is still usable when space gets tight.

There is also footable which is a jQuery plugin that allows you to specify breakpoints that will get nested in the table as expandable regions when the screen width gets smaller.

All of these approaches solve the problem of a rigid table breaking a responsive design without having to make many changes to your existing code.   Zurb’s solution and footable particularly can slip into your existing application with minimal interruption.     Now there is no excuse for tables of data breaking your responsive design.


So how do you accommodate tables in your responsive design?

Posted on Wednesday, April 3, 2013 11:05 AM Stylish musings | Back to top

Comments on this post: No excuses for Tables Breaking your Responsive Designs

comments powered by Disqus

Copyright © Nick Harrison | Powered by: