Back to blog

Table Manners

exampletable.jpg

Many of our platform projects require the redesign of large amounts of tabular data. Sometimes the goal is to scan, sort and find a value. Other times the focus shifts to comparing values. Looking back at the work we’ve managed to extract a few simple suggestions. Most boil down to common sense.

Style

Ensuring there is differentiation between rows or columns, providing adequate padding and making clear what is data vs. headers are a few ways to help with table design – admittedly, it’s more art than science.

comparechart.jpg

Highlighting rows and/or columns

Using hover states can add focus when viewing a large table. Back in 2005 we developed a cross-hair effect that simultaneously highlights the row and the column on hover. Since then we’ve since seen quite a few sites adopt this technique.

crosshair.jpg

Ascending and descending sorting

Sorting should go without saying. The only thing worth noting is the mechanic should be clear and the default logical.

sort.jpg

Winnowing the data

In some cases the data tables get so large that sorting isn’t enough to get at finding or comparing the data you need to.

winnow.jpg

A single line of text in a row

Using multiple lines of text or data in table row makes it nearly impossible to scan and compare.

multiple-lines.jpg

Geoff Teehan More posts by Geoff Teehan