Alternating Row Colors


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


Use alternating row colours for making the table more readable.


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.


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.


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

plml logo


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.
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.
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.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below