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.
In most cases they are using dotted horizontal line which is better than a solid line.
In Google Slides or Excel it's easy to use low-contrast shading between dark and light backgrounds which is another less-intrusive way to delineate rows without using a solid line.
This is an annoying trend; it's true that row lines add a lot of noise that distracts from the content, but you should use color and value to reduce the dominance of the table lines, not remove them altogether.
For a small 3 column table, it is not necessary. The tables on the page "Example Tables I" could have done without horizontal lines and a little more space between rows would have been enough.
Hmmm...I had the opposite reaction. "Good guidelines, why don't their Economist examples follow them?" I find very light shading to be way better than horizontal lines.
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
If the originally submitted guide is admittedly subjective, then it seems like sharing different subjective viewpoints (with reasoning) in HN comments is a great idea. If it's a subjective thing, I'd rather hear from several viewpoints before making decisions about how to handle my own tables.
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?)
> 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.
It's because people on HN loves to be contrarians. The tables with the double lines really do look like garbage. The examples aren't doctored. One variant is what you get with Latex's builtin table commands, the other with the booktabs package.
Yes, many of the rules do. Here is a presentation by Richard Rutter (co-founder of a design agency and an online font service) on Web Typography. The presentation includes advice on how to improvement table readability and appearance.
Link to the segment on tables (approx 7 mins length):
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.
What about it is "wrong"? Perhaps I'm scarred by my own institution's predilection of left-justifying (or center) columns of numbers that this seems fine to me.
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.
Likewise...with HN you never know what esoteric guide or advice lies beneath a somewhat vague headline, and in almost every case it's unexpectedly convenient or interesting.
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.
> [...] By the time the transformation from newspaper to magazine format had been completed, the habit of referring to ourselves as “this newspaper” had stuck.
