Alternating Row Colors

Problem

Users need to read or scan a table in search of particular information

Solution

Use alternating row colours for making the table more readable.

From www.planet.nl

Use when

Typically, an overview of items is given because of a Search Box or List Builder. The table can be quite complex and have several columns which makes it hard to see which items belong to the same row.

How

Use two colors of low saturation, e.g. white and a very light shade of an other color, that are only slightly different. Color each row of the table by alternating these two colors. The effect can be enforced by adding another horizontal line using a dark color.

Why

The row color elimates the need of table borders and make it easy for the eye to read a row. In a vertical sense, the colors make it easier to 'catch' an item because it is on either one of the colors.

More Examples

Another example from CNN:

Code examples

Listapart on Zebra Tables

Comments

6 comments have been added to this pattern

Owen Blacker, 7th November 2007

For larger tables, alternating every other row can be unpleasant. Between about a dozen and about four dozen rows, it's worth alternating in groups of three (so: light ÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂ3, dark ÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂ3, repeated) and beyond that many rows, alternate in fives.

The eye can quite easily distinguish whether or not you're on the top, middle or bottom of a colour band; alternating in fives isn't any more difficult, as the eye can distinguish top-middle and bottom-middle almost as easily.

A trick I learnt from AD&D rulebooks and the like in my rÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂ´le-play-gaming youth ;o)

Luc Moers, 27th June 2008

I think an alternate name that often is used to summarize this technique is "Zebra striping".

cronopio, 16th July 2008

Check out this piece of research, which finds that zebra striping is not particularly effective.
http://www.alistapart.com/articles/zebrastripingdoesithelp

Sarah, 26th September 2008

A List Apart has posted further research on zebra striping and now suggests that single-color striping is at least no worse than other styles.
http://www.alistapart.com/articles/zebrastripingmoredataforthecase/

Levi Page, 30th September 2009

I think there are so many factors that affect whether or not zebra striping should be used. I personally don't like Zebra striping; i'd rather have a lined grid similar to Excel. Most of these factors are mentioned in the referenced articles, but one I did not see was the purpose of the grid. If you are doing a simple lookup, then yeh alternating rows are great. But, if you need to scan the data to look for problems or patterns, I think the alternating rows are a major hindrance. I compared probably 50 different designs and find the excel style to be the easiest to use for this purpose. The correct line colors, font colors, spacing, etc., all make a huge difference regardless of the approach used.

Tony, 14th March 2011

I've often ended up using only horizontal lines. Its less confusing than an alternating view and also cleaner than having both horizontal and vertical.