Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web:<\/p>\n
There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organisation and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs.<\/p><\/blockquote>\n
This reminds me of way back when Chris wrote about responsive data tables<\/a> and just how tricky they are to get right. Also there\u2019s a great post by Richard Rutter in a similar vein where he writes about the legibility of tables<\/a> and fine typography:<\/p>\n
Many tables, such as financial statements or timetables, are made up mostly of numbers. Generally speaking, their purpose is to provide the reader with numeric data, presented in either columns or rows, and sometimes in a matrix of the two. Your reader may use the table by scanning down the columns, either searching for a data point or by making comparisons between numbers. Your reader may also make sense of the data by simply glancing at the column or row. It is far easier to compare numbers if the ones, tens and hundreds are all lined up vertically; that is, all the digits should occupy exactly the same width.<\/p><\/blockquote>\n
One of my favorite table patterns that I now use consistently is one with a sticky header. Like this demo here:<\/p>\n
\n See the Pen
\n Table Sticky Header<\/a> by Robin Rendle (@robinrendle<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nAs a user myself, I find that when I\u2019m scrolling through large tables of data with complex information, I tend to forget what one column is all about and then I\u2019ll have to scroll all the way back up to the top again to read the column header.<\/p>\n
Anyway, all this makes me think that I would read a whole dang book on the subject of the
<table><\/code> element and how to design data accurately and responsively. <\/p>\n","protected":false},"excerpt":{"rendered":"Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web: There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and […]<\/p>\n","protected":false},"author":223806,"featured_media":268216,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[651],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/tables.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":326083,"url":"https:\/\/css-tricks.com\/under-engineered-responsive-tables\/","url_meta":{"origin":281855,"position":0},"title":"Under-Engineered Responsive Tables","date":"December 1, 2020","format":false,"excerpt":"I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that had to be jumped. The nature of
elements are that they have something a minimum width depending on the content they contain and\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/table-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15811,"url":"https:\/\/css-tricks.com\/responsive-multi-column-data-tables\/","url_meta":{"origin":281855,"position":1},"title":"Responsive Multi Column Data Tables","date":"December 30, 2011","format":false,"excerpt":"Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her solution involves marking columns as \"essential\" and \"optional\" with CSS\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15891,"url":"https:\/\/css-tricks.com\/responsive-data-table-roundup\/","url_meta":{"origin":281855,"position":2},"title":"Responsive Data Table Roundup","date":"January 11, 2012","format":false,"excerpt":"There has been a bunch of takes on responsive data tables since I first published about it. View Demo The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/zurb-responsive-tables.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":297246,"url":"https:\/\/css-tricks.com\/making-tables-responsive-with-minimal-css\/","url_meta":{"origin":281855,"position":3},"title":"Making Tables Responsive With Minimal CSS","date":"October 17, 2019","format":false,"excerpt":"Here\u2019s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this: See the Pen Responsive Tables #2.5: Flexbox by Bradley Taunt\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/09\/table-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":239489,"url":"https:\/\/css-tricks.com\/accessible-simple-responsive-tables\/","url_meta":{"origin":281855,"position":4},"title":"Accessible, Simple, Responsive Tables","date":"March 22, 2016","format":false,"excerpt":"There is no single solution to make any appropriately responsive. That's what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. This is a great addition to territory we've been treading for a while. Content and Comparison tables There are many types\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19423,"url":"https:\/\/css-tricks.com\/footable-a-jquery-plugin-for-responsive-data-tables\/","url_meta":{"origin":281855,"position":5},"title":"FooTable: a jQuery Plugin for Responsive Data Tables","date":"December 13, 2012","format":false,"excerpt":"Brad Vincent introduces a new jQuery plugin for helping with responsive data tables with his friend Steve.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281855"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=281855"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281855\/revisions"}],"predecessor-version":[{"id":281862,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281855\/revisions\/281862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/268216"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=281855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=281855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=281855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}