All 5 books, Edward Tufte paperback $180
All 5 clothbound books, autographed by ET $280
Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
Seeing With Fresh Eyes
catalog + shopping cart
Edward Tufte e-books
Immediate download to any computer:
Visual and Statistical Thinking $5
The Cognitive Style of Powerpoint $5
Seeing Around + Feynman Diagrams $5
Data Analysis for Politics and Policy $9
catalog + shopping cart
New ET Book
Seeing with Fresh Eyes:
Meaning, Space, Data, Truth
catalog + shopping cart
Analyzing/Presenting Data/Information
All 5 books + 4-hour ET online video course, keyed to the 5 books.
zebra tables and lists

We produce many tables and lists in our publications group, in print, presentations, and web pages. There is a growing trend toward using "zebra tables", alternating bands of background color for every other row.

While this can look graphically cute when viewed at a distance, I find my eye jumps to all the even (or odd) rows when scanning for information, so that I must constantly back up and rescan.

Is my observation backed by any other evidence, or am I just a whiner? I would appreciate a reference to a good discussion on design of tabular information.

Thanks,
Bruce Hensley

-- Bruce Hensley (email)


See Envisioning Information, chapter 3.

-- Edward Tufte


Thank you for the reference; I now have a vocabulary to use in explaining the phenomenon to coworkers ... the alternating backgrounds are creating two distinct layers of focus in the tables when there is no difference between the alternating rows of information. The technique has value in instances where there is a distinction you want to make visible, but used in a simple list, it confuses the eye into thinking there are two separate types of information.

However, three coworkers claim they find the zebra lists easier to scan than a list where the lines are separated by white space or faint, thin, grey rules (I am the odd one out). Have you found that some of the rules you have found apply only to certain classes of people, perhaps based on their right/left brainedness, their cultural or personal experience, or some other cerbral difference?

P.S. The note on zebra referees made great dinner conversation material with my 13 year old, sport, stepson from Michigan.

-- Bruce Hensley (email)


To implement ET's alternative to zebra stripes in HTML, do something like this:

<table>
<tr bgcolor="#EFEFEF">
<td>data</td>
</tr>
<tr bgcolor="#FFFFFF">
</tr>
<tr bgcolor="#EFEFEF">
<td>more data</td>
</tr>
</table>

Which looks like this:

data
more data

It's not optimal, but IE (at least) will put in a very thin white line between the cells, and #EFEFEF is a very light gray that shouldn't be too distracting. In my version (used for a company phone list), you really can't see either the background or the white line. Your eye just scans horizontally.

Stephen

-- Stephen Foskett (email)


Nice monochromatic tables

ET's alternative to zebra stripes looks great on screen and printed in color. But lightly colored backgrounds look terrible or disappear altogether when printed on many laser printers. What is the best way to format a table that will end up in the output tray of a monochromatic printer?

-- Chris Morris (email)


I'm a fan of putting a thin dotted or light-colored line below every third row in the table (as at left, in the above image) for two reasons:

  1. When scanning across rows, the reader can keep his place by using the position of the line as a point of reference. Each row either has a line directly above it, below it, or has no line adjacent to it.
  2. Unlike zebra tables, there is a significant distance between two lines, so the eye is less likely to skip to a different line of similar color. In a table with 1 pica leading, this method produces a separation of 3 picas between lines, while a zebra table has lines only 1 pica apart.
In Adobe Illustrator, I find a 0.6 point line, with rounded caps and a dot spacing of 0/2.1 works quite nicely. And of course, this is not based on any hard evidence, other than my own observations.

-Matt

-- Matthew Ericson (email)


I would also thank Mr.Tufte for providing the explanation about the perception of the striped tables. For long time this kind of table decoration was irritating me, because my eyes also jump between all the odd/even rows.

But I still find such tables everywhere and I can't understand, why? The single "pro" I have found here

Striped Tables: Comparison @ alistapart http://www.alistapart.com/d/stripedtables/comparison.html

was that in the multicolumn tables, tall stripes guide the eye to the next column better than thin lines.

-- Andrei Sedelnikov (email)


Again, this is a solved problem, with examples in Envisioning Information, chapter 3. Strips are merely bureaucratic or designer chartjunk; good typography can always organize a table, no stripes needed.

-- Edward Tufte


I'm glad this popped up today as I was reminded of the issue.

Discussing the New Jersy Transit Northeastern Corridor Timetable, ET writes on page 55 of Envisioning Information "A redesign calms the dominating grid, moves the New York departure times to the very top, de-emphasizes less important data, and add new information." The table has 30 columns. Since not all trains stop at all stations some data is missing and therefore the table lacks regularity. The redesign includes light, warm gray, horizontal zebra stripes that reinstill vertical order lost to the empty cells. The stripes are three rows tall, so one has an upper border, the next has no border, and the third has a lower border.

Today I printed two tables, the same table really, but with one column of input and three columns of output changed to explore the result of a policy change. The entire table is 27 columns wide and 33 rows tall. I did not use zebra stripes or any other device, just data. Along with changing the input in the second spreadsheet I wrote procedures to automate the output calculations and changed the calculations done on the input. Someone else reviewing the two tables found it necessary to hand-draw lines between every five rows on both tables. That person found what appeared to be an error in my calculations. As I checked my work I found those five lines very helpful.

Last week and over the weekend I was making tables of other data, 12 columns wide and 93 rows tall. None of the 70 or so people reading the 15 editions of changing data asked for curbs at all, and I never percieved a need for them myself.

As the secretary for a committee that meets monthly I keep attendance for the year on one page. The months run across the top and the committee members run down the side. The rows are curbed with stripes, however, all the cells are initially empty. I have to figure out where to put check marks, so I drew vertical lines after every third month.

I think at some number of columns between 10 and 25 a minimal row-curb may be helpful, be it stripes or ruling. The number of columns is probably dependent on how many fits in the eye's fovea or the mind's area of attention. Getting back to rows though . . . harkening back to Miller's Magical Number lecture, the curb may be least obtrusive at an interval of five rows rather than three. The eye-brain system, running across columns, marks and then repeatedly checks the distance of a row from the nearest convenient parallel landmark. As Miller summarized, the eye can detect, within a fraction of a second, five to 10 differences in one dimension—in this case curb immediately above, nearer above, equidistant, nearer below, and immediately below. The eye-brain system can descriminate five differences as quickly as it can descriminate three, and it starts getting confused if there are six or more differences and the eye-brain system becomes unreliable at around 10 differences in one dimension. Omitting all curbing devices remains an excellent option because individual readers can at least draw lines at whatever intervals, and in whatever directions, they want.

-- Niels Olson (email)


onmouseover

I wonder what you folks think about highlighting a row when the mouse is hovering over the row? Would this increase the readability of data? Or will this changing colors just end up confusing the user more?

-- Thaths (email)


Thaths, only if that row is part of a widget, and can actually be selected. Otherwise, it's just annoying imo.

-- Marty (email)


There's an article from a few weeks ago in A List Apart (one of the few web design sites that covers both theory and practice) that attempts to find an increase in speed or accuracy using zebra striping on a table. I'm not certain the experimental design is sound, but it's worth reading.

Zebra Striping: Does it Really Help?
Unfortunately, this study hasn't given us a clear answer about whether or not to continue applying zebra stripes to tabular data. However, it didn't give any indication that zebra striping makes things worse, and we do know that it is liked by a number of users, so it certainly doesn't seem to cause much harm.

I'd personally be interested in seeing if the technique of grouping multiple rows together is beneficial in large tables.

-- Robert Simmon (email)


We publish an online tool that allows users to see live prices on bonds with a number of different measures and have just relaunched to universal criticism. Among the changes we had introduced were removal of zebra stripes in place of a subtle grey line every 3rd row, changing the font from Arial to GillSans, and several others. We're sticking firmly to our guns here on the basis that we don't design by committee but have we made any obvious errors here? I've included screenshots of the new (the cream background) and old versions.

-- Will Oswald (email)


Will,

Your redesign is clearly an improvement in many areas including the removal of the vertical lines and of the gradient in the header columns.

My challenge with zebra striping is in small sets of data. If there are too few rows in the table then zebra striping looks more like highlighting than a visual aid for scanning. For this reason I believe your choice of a horizontal line is appropriate. But, unfortunately, for the small amount of data displayed, the single horizontal line has the effect of dividing the set in 2 instead of clearly being a visual aid for scanning.

I propose that for a set of so few rows that it is necessary to use 2 horizontal lines. The 2 lines more readily establish a pattern and thus it is more clear why they are present.

Finally, I couldn't help myself and had to make some additional modifications to the chart.

I understand the objective of the pair of vertical green and blue lines but I challenge their effectiveness and thus I removed them. The column header alignment to the data seemed inconsistent so I attempted to center align the headers to the data. Also, I believe the data is much easier to read when decimal aligned. Note that I also made the precision consistent by adding a zero to the 5.1 data item in the last column. Lastly, note that the second "Chg" column aligns the "+" symbol, again making the data easier to scan.

Steven


-- Steven Chalmers (email)




Threads relevant to statistical graphics:

Sports data (along with financial and medical data) are an obvious and natural application of sparklines.


Privacy Policy