Best Practices for Data Tables

Image credit:

At work, after planning and running a round of Usability Observations, I volunteered to sketch out some possibilities for improving the usability of a couple of data tables. Here’s the research I did on best practices.

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

  • Fantastic article that covers not only the what and why, but the how of tables, focusing on typography and CSS styling.

Design Better Data Tables, Andrew Coyle

  • Beautifully crafted article with animated examples of several best practices for visual and interaction design of data tables.


  • Purely about visual design of tables, but some really good illustrative examples in there
  • Kind of outdated (not really sexy) but the principles still hold
  • good explanation for some principles that I already knew but wouldn’t be able to easily explain. For example, why it’s not a good idea to use strong vertical lines (“vertical shaded columns and vertical lines serve to break up any horizontal connectedness and are best avoided.”)
  • Really reminds me of the timesheets redesign I proposed at my previous company. I learned a lot by playing with the spacing of the data and labels as well as trying to reduce the noise by limiting the data that I showed.


  • Somewhat fluffy article. Not a lot of substance. Tips include:
    • alternate row color (subtly)
    • Use Table sections
    • pagination (I like infinite scroll way better – where possible… oh wait. the next section of the article talks about “Continuous scrolling”. )
    • hover actions
    • actions on multiple rows (would have come in handy for the IT2 multi select workbench stuff)


  • a few good examples but a little old (I think they’re from 2010)


  • Lots of good examples, but again, from 2010 so not the latest and greatest

UX StackExchange Zebra Stripes

  • Great answer basically says that yes, you should use zebra stripes

UX StackExchange Large Columns

  • Good discussion on options for formatting tables on phone screens

Dark Horse Analytics

  • super concise slides and gif showing some good principles for table design!

UX Movement

  • decent techniques, including rounding data, grouping, using zebra stripes, and more


1 thought on “Best Practices for Data Tables”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s