Alternating Row Colors Edit
Problem summary
The user needs to visually separate similar looking rows in a table apart in order to match the values of each row.
Example
Usage
- Use when you have several columns in a table
- Use when the content of each column is often of similar nature
- Use when there a multiple lines for each row
- Use when the height of each row varies
Solution
To differentiate table rows from each other, a different shade is used as background color for every second row. Keep the difference between the two colors to a minimum to preserve a gentle feeling. The colors should be similar in value and low in saturation – the one should be slightly darker or lighter than the other. It is often seen that one of the two colors is the background color of the page itself.
Rationale
The purpose of the shading in every second row is only to provide an aid for the every to follow a row from the left to the right and back again – without confusing one row with another. The purpose is not to drastically change the design of the table.
A side effect of shading every second row with an alternating color is however that the table will stand out from the rest of the page. The shading in this way boxes in the table.
More example images of the 'Alternating Row Colors' pattern
-
-
From download.com
-
From mysql.com
-
Alternating column colors are used in the shopping cart at Williams-Sonoma to distinguish columns from each other.
This document is in version 2 and was last updated on Jul 16, 2009 by lapinblatte. The original author of the design pattern was Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
Alternating Row Colors has 3 comments
-
over 1 year ago
Peter
7 Jul 2008
A List Apart has a very interesting article on Alternating Row Colors or Zebra Striping – http://www.alistapart.com/articles/zebrastripingdoesithelp – worth a read before you decide to alternate row colors!
-
11 months ago
Mona
9 Apr 2009
Zebra stripping doesn’t work in interactive apps where there are mouse overs, selects, inline edits etc. I think it was great in the paper world but is outdated and even damaging in web apps of today.
-
7 months ago
Josh Johnson
27 Aug 2009
I disagree that it fails to work in interactive apps. I’ve created quite a few examples of subtly shaded alternating row colors with highly contrasted hover and selection colors, so even from an accessibility standpoint it remains functional. That said, the designer needs to make a choice about whether it makes sense or is causing visual distraction. I rarely find that alternating colors and visually delineated boxes around the cells are both required (as shown in the example), but when you’re striving for high data density, trading an extra pixel per row for the border in exchange for alternating background colors can be the right choice.