Design Better Data Tables

Matthew Ström
Aug 3, 2016 · 7 min read

Poor tables. Where did they go wrong?

After being the bread and butter of the web for most of its early history, tables were cast aside by many designers for newer, trendier layouts. But while they might be making fewer appearances on the web these days, data tables still collect and organize much of the information we interact with on a day-to-day basis.

For instance, there’s what I consider to be the mother of all tables: The United States’ “Harmonized Tariff Schedule,” a table that stretches over 3,550 pages and lists every single good that can be imported into the US, including such thrilling entries as “Men’s or boys’ overcoats, carcoats, capes, cloaks, anoraks (including ski-jackets), windbreakers and similar articles (including padded, sleeveless jackets).”

What is a carcoat, anyway?

The ire raised by data tables is due, no doubt, to just how awful they can look when they’re not well designed. The design of a table is its linchpin: if it’s done right, it makes complex data easy to scan and compare. If it’s done wrong, it can render information completely incomprehensible.

So let’s do it right, right?

Know your numerals

Here’s a quick illustration of the difference between oldstyle and lining figures.

Oldstyle vs. lining figures

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.

The difference between proportional and tabular figures is not quite so obvious:

Proportional vs. tabular figures

Proportional figures are designed to match the color — that is, the general sizing and spacing — of the typeface. Tabular figures, on the other hand, are all identically-sized, so that columns of numbers line up properly. While the difference may not seem great on the scale of one or two lines, using tabular figures makes scanning large tables significantly easier and less error-prone.

A technical note on using tabular lining figures

But now for the bad news: not all typefaces have true tabular lining figures available. The ones that do tend to be pretty expensive. There are a few exceptions: The excellent Work Sans is a free typeface that has true tabular lining figures.

If you can’t find a suitable typeface that has tabular lining figures, a good fallback is monospace fonts — while they tend to have a more “source code” look, they’ll always be well-suited to displaying numbers in tables. Additionally, the new Apple system default typeface San Francisco has excellent tabular lining figures and looks great at small sizes.

Alignment Matters

1. Numerical data is right-aligned
2. Textual data is left-aligned
3. Headers are aligned with their data
3½. Don’t use center alignment.

List of U.S. states by historical population — Wikipedia

Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go[1]. Therefore, tables should keep numerical data right-aligned.

Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly scan text can be infuriating if it’s not left-aligned.

Headers, generally, should carry whatever alignment their data has. This keeps the vertical lines of the table clean, and provides consistency and context.

Center alignment causes the lines of the table to become “ragged,” which makes it much harder to scan entries, often necessitating extra dividers and graphical elements.

Consistent Significant Figures = Better alignment

Fewer, Clearer Labels

Mississippi River Flood Stage Forecast — NOAA




As little ink as possible

2016 National League Batting Statistics — BaseballReference


Horizontal rules are the most useful, as they allow you to significantly reduce the vertical space occupied by long tables, making faster work of comparing lots of values or seeing trends over time.

One unsubstantiated opinion I have about rules is that zebra striping is bad. Really, really bad. Take it or leave it.


Additionally, tables should be monochromatic. Using colors to provide organizational context or added meaning increases the likelihood of misinterpretation or error, and causes usability problems for those with impaired vision.

In conclusion

Further Reading & Inspiration

Butterick’s Practical Typography is my go-to for all things typographical, and the kind of reference you keep multiple copies of — it’s so practical!

Lastly, no article on data design would be complete without an Edward Tufte shoutout. His insightful writing on design is indispensable.

[1] For other interesting approaches to arithmetic, check out how Japanese children use a Soroban or how lattice multiplication works.

Special thanks to kontur, Nathan D Huening, Robin Rendle, Scott Dawson, Karen Bachmann, and Kelly Jepsen for catching errors in this story.

Mission Log

Explorations of product strategy, design, and development.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store