Small guide to making nice tables [pdf](inf.ethz.ch)
inf.ethz.ch
Small guide to making nice tables [pdf]
https://inf.ethz.ch/personal/markusp/teaching/guides/guide-tables.pdf
47 comments
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 :)
Great points! Those are wonderful design principles, and can really help everyone in evaluating the layout of a table.
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.
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.
I think it depends on the width of the table.
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.
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.
Here is a good guide to apply to tables used on the web
https://alistapart.com/article/web-typography-tables/
https://alistapart.com/article/web-typography-tables/
I'm fond of the condensed way similar advice is presented here: https://www.darkhorseanalytics.com/portfolio/2016/1/7/data-l...
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
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
You're just countering his subjective opinion with your subjective opinion.
It's like he said he prefers cherry pie, and you're saying 'no that advice has issues, I prefer apple pie.'
It's like he said he prefers cherry pie, and you're saying 'no that advice has issues, I prefer apple pie.'
Sure but is that a problem?
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.
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.
How can subjective advice be 'wrong' though? How can there be an 'issue' with what someone likes the look of?
[deleted]
Well if you're posting it publicly and claiming "this is better" then you're either wrong or open to criticism.
There is an objective truth to design, for example one table style can be faster to read or more visually appealing when averaged over the population.
OP is just expressing his subjective view about which design is objectively better based on his expertise as a UX designer.
OP is just expressing his subjective view about which design is objectively better based on his expertise as a UX designer.
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.
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.
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.
This is talking about print tables. Do the same design principles apply to online tables?
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):
Set tables to be read
https://youtu.be/hbIZX6tE9JY?t=704
Link to the segment on tables (approx 7 mins length):
Set tables to be read
https://youtu.be/hbIZX6tE9JY?t=704
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.
Not using math mode (along with improper font setup) here also uses a different font for digits in the header and the body, which looks a bit weird.
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.
As shown, the minus sign is rendered as a hyphen. This looks glaring when you're used to math mode's thinner, longer minus sign.
To see the difference, typeset this with LaTeX:
To see the difference, typeset this with LaTeX:
\documentclass{standalone}
\begin{document}
-50 vs $-50$
\end{document}Gotcha, thanks. Hardly "eye-bleed" worthy IMO, but noticeable for sure.
Ever since realizing that a minus sign is supposed to line up with a plus, I’ve never been able to unsee it. Compare:
-Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet
−Lorem ipsum dolor sit amet
-Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet
−Lorem ipsum dolor sit amet
I thought the "bad" tables were the "good" tables until I was 6 pages in.
To each his own, I guess.
To each his own, I guess.
Same here. You're not alone
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.
- 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.
[deleted]
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)
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.
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.
Getting offended on behalf of others is controversial in general, but in this case it's plain silly.
URL: subscription.economist.com/Magazine/Subscribe
www.economist.com/about-the-economist
> Frequently asked questions
> Why does The Economist call itself a newspaper?
> [...] By the time the transformation from newspaper to magazine format had been completed, the habit of referring to ourselves as “this newspaper” had stuck.
URL: subscription.economist.com/Magazine/Subscribe
www.economist.com/about-the-economist
> Frequently asked questions
> Why does The Economist call itself a newspaper?
> [...] By the time the transformation from newspaper to magazine format had been completed, the habit of referring to ourselves as “this newspaper” had stuck.