Comments on Web Typography: Designing Tables to be Read, Not Looked At

11 Reader Comments

Back to the Article
  1. I already have the book - a great read!

    Copy & paste the code below to embed this comment.
  2. Wonderful article, thank you!

    I think that the oblique column headers could be simplified a bit, by using max-width:0; overflow:visible; to avoid absolute positioning. This way you don’t have to hardcode different x-offsets for each column.

    th {
      transform-origin: left bottom;
      transform: translatex(1em) rotate(-60deg);
      max-width: 0;
      overflow: visible;
      white-space: nowrap;
    }
    

    Codepen: https://codepen.io/donmccurdy/pen/PONbVP?editors=1100

    Copy & paste the code below to embed this comment.
  3. Great article, thank you.

    Some European countries switch the comma and period characters around, so that periods separate thousands, and the comma denotes the decimal place. Is it possible to cope with this (without separate CSS rules for language) when attempting to align by decimal with the method you describe?

    Copy & paste the code below to embed this comment.
  4. TLDR; “The Ultimate Table Guide”

    —-

    Thanks for the bookmark, I look forward to using: td { text-align: “.” center; }

    Copy & paste the code below to embed this comment.
  5. Such a small trivia, HD resolution is usually 1280 x 720 px comes with 16:9 aspect ratio.

    Copy & paste the code below to embed this comment.
  6. I used to build the website with bluevoda on my website http://www.bonofe.com and they were stunning

    Copy & paste the code below to embed this comment.
  7. Great article, just commenting that tables in it don’t work in mobile view. I’m using updated Chrome on Android. If I switch to desktop view they are fine.

    Copy & paste the code below to embed this comment.
  8. Great article, neat snippets, me like very much!
    I like the breakdown in “Do not over-stylise tables”(section 10) very much. But how do you deal with the possibility to increase/decrease the column-width by mouse? You can’t see the border between the columns to change the width of a column.
    Can you say it’s common sense to do so - even without seeing a styled divider?

    Copy & paste the code below to embed this comment.
  9. Using fonts online and having access to free fonts have come a long way and made designers jobs much more comfortable by having such a vast selection of styles to choose.

    Copy & paste the code below to embed this comment.
  10. Thanks for this article. I must admit I hate tables… They always destroy a nice layout and it’s really time consuming to have them display the way we want… :(

    Copy & paste the code below to embed this comment.
  11. Hey Richard,

    great article, I agree that since the early <table> days many people have forgotten some basics of how to use actual tables effectively and in a user friendly way — on and off the web :)

    You might want to check your definitions for numerals. Your illustrations show correct examples, but the labels contradict correct usage of the terms. You are actually comparing old-style versus lining (lines up to the height of the caps), and proportional (variable width) versus tabular (equal width numbers, look neat and comparable in a table in several rows).

     

     

    Copy & paste the code below to embed this comment.
  12. Sorry, commenting is closed on this article.