{"id":262294,"date":"2017-11-07T07:52:22","date_gmt":"2017-11-07T14:52:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262294"},"modified":"2017-11-07T07:52:22","modified_gmt":"2017-11-07T14:52:22","slug":"designing-tables-read-not-looked","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-tables-read-not-looked\/","title":{"rendered":"Designing Tables to be Read, Not Looked At"},"content":{"rendered":"

Richard Rutter, in support of his new book Web Typography<\/a>, shares loads of great advice on data table design. Here’s a good one:<\/p>\n

You might consider making all the columns an even width. This too does nothing for the readability of the contents. Some table cells will be too wide, leaving the data lost and detached from its neighbours. Other table cells will be too narrow, cramping the data uncomfortably. Table columns should be sized according to the data they contain.<\/p><\/blockquote>\n

I was excited to be reminded of the possibility for aligning numbers with decimals:<\/p>\n

td { text-align: \".\" center; }<\/code><\/pre>\n
But the support for that is non-existent as best I can tell. Another tip, using font-variant-numeric: lining-nums tabular-nums;<\/code> does have some support<\/a>. <\/p>\n
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here’s a good one: You might consider making all the columns an even width. This too does nothing for the readability of the contents. Some table cells will be too wide, leaving the data lost and […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[17],"tags":[651],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":150162,"url":"https:\/\/css-tricks.com\/complete-guide-table-element\/","url_meta":{"origin":262294,"position":0},"title":"A Complete Guide to the Table Element","date":"September 19, 2013","format":false,"excerpt":"The  element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we\u2019re going to look at how to use them, when to use\u2026","rel":"","context":"In "Article"","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":15891,"url":"https:\/\/css-tricks.com\/responsive-data-table-roundup\/","url_meta":{"origin":262294,"position":1},"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":173860,"url":"https:\/\/css-tricks.com\/fixing-tables-long-strings\/","url_meta":{"origin":262294,"position":2},"title":"Fixed Table Layouts","date":"July 2, 2014","format":false,"excerpt":"There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. It is this: table { table-layout: fixed; } The default property for table-layout\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342294,"url":"https:\/\/css-tricks.com\/making-tables-with-sticky-header-and-footers-got-a-bit-easier\/","url_meta":{"origin":262294,"position":3},"title":"Making Tables With Sticky Header and Footers Got a Bit Easier","date":"June 14, 2021","format":false,"excerpt":"It wasn't long ago when I looked at sticky headers and footers in HTML 
s in the blog post A table with both a sticky header and a sticky first\u00a0column. In it, I never used position: sticky on any , , or  element, because even though Safari and Firefox\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/Screen-Capture-on-2021-06-15-at-06-45-53.gif?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":239489,"url":"https:\/\/css-tricks.com\/accessible-simple-responsive-tables\/","url_meta":{"origin":262294,"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":262294,"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":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262294"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=262294"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262294\/revisions"}],"predecessor-version":[{"id":262295,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262294\/revisions\/262295"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=262294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=262294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=262294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}