Small guide to making nice tables [pdf]

Tufte has a lot to say about this (and many viz things) - worth reading his books, really. The general guideline I try to remember is "facilitate comparison" (present things that you want the viewer to compare/see near each other) and "maximize data/ink ratio" (put as much data, and as little other stuff, on the page). The latter, in particular, tells us to reduce lines from tables as much as possible; I often find just one (not the three this approach recommends) to be plenty, depending on the data. That is, just the line separating header and data. Of course, YMMV :)

I found the lack of any horizontal line separating rows in the given examples of good tables off-putting. In the examples given from The Economist they are using horizontal lines and I agree those are great examples.

Here is a good guide to apply to tables used on the web

https://alistapart.com/article/web-typography-tables/

Weighing in as a UX designer. I appreciate the attempt to encourage people to think about design, but this guide has issues.

What's wrong with the advice:

-Removing horizontal lines decreases readability in the complex examples given

-Vertical lines are very helpful when there are more than three columns

-Serifs have actually been found to be more readable due to their distinct letterforms and can be comprehended more quickly. San-serif fonts are fine too though. Basically, choose a font that has good legibility.

-Don't rely on light gray lines, because they might not be visible on all screens, or in various environments, and likely won't translate to print

-Double horizontal lines for column headers are fine.

-Overall, if you're presenting important information, usability is much more important than minor aesthetics.

Here are some more actual tips for laying out tables:

-Ensure that if a horizontal line needs to be scannable, that it actually has enough padding, or a horizontal separator, be it a dotted line or some other type of visible anchor

-If columns have a lot of information, a table may not be sufficient. Consider aggregating individual rows into a card format.

-Padding is your friend. Also, be consistent with it. A table with too little, but consistent padding looks better than one with more breathing room and inconsistent padding.

-Most information should be aligned left. One exception is currency. That should be aligned right

I make my tables like this guide recommends, but more because I know that it's the "professional", "publication quality" way that the people "in the know" prefer. I myself don't really feel that strongly about vertical lines but I avoid them to not look ignorant.

It says a lot that the first slide doesn't even say which is the good one and takes is for granted ("Easy decision, isn’t it?") but some here have thought the bad ones are the good ones.

Shows that it's more of a fashion thing. (Not counting the intentional mistakes in the "bad version" like kerning "fi lter" and other spacing errors in the math, like the exponent in the top right formula -- seriously why introduce those additional mistakes, why not just make the tables themselves different?)

This is talking about print tables. Do the same design principles apply to online tables?

Page 10/11: -94.7351 etc. is so wrong, my eyes are bleeding! Should be typeset in math mode like $-94.7351$ (or whole column in math) to get at least the minus sign right.

I thought the "bad" tables were the "good" tables until I was 6 pages in.

To each his own, I guess.

Those "nice" tables are not very nice.

Here is the advice:

- Avoid vertical lines

- Avoid “boxing up” cells, usually 3 horizontal lines are enough: above, below, and after heading (see examples in this guide)

- Avoid double horizontal lines

- Enough space between rows

- If in doubt, align left

I agree with this, although some of his examples I would tweak slightly, and sometimes I wonder about how much better "align left" ends up working.

IMHO author is missing the point here, lines are not just arbitrary decoration, they've got an important purpose to guide the eye. If line is removed, it needs to be replaced by enough white space that will separate the content visually. The 1st example fails horribly with this, it's impossible to see where the 2nd row begins without reading the whole text. Also, the longer a row/column is, harder it is to follow the separation and line is a better choice in those cases (or more spacing is needed). There's nothing particularly special about these "rules", they're just the normal typography practices and some common sense applied to tables.

These tables are almost unusable. They look better in the most superficial possible way. They're more "pleasant", but absolutely not better for a serious use-case.

This is some good advice for making PPTs or Excel spreadsheets as well.

Bulma.io does most of this (web site tables!)

(2010)

I was honestly expecting (and hoping) this was an article on carpentry...

For a moment I thought this was a guide for physical tables (like the ones you use to have dinner).

No offense but when you compared and said which is better - I had to read the rest of the slides to figure out which one was supposed to be better. Too many lines is gaudy but also can provide high level information. Too little lines might look "nice" in its own sense but then you have a lot of double checking.

> The following tables are taken from the magazine Economist

The Economist is in fact a newspaper.

Edit: do people think this is a snobby comment? The Economist maintains this despite publishing in a medium which looks like a magazine.