UI Patterns and Techniques

Alternating Row Colors


From iTunes for Mac OS X

Use when:

A table's rows are difficult to separate visually, especially when there are many columns, or multiple lines to a row.

Why:

Blocks of gentle color define and separate the information contained therein, even when you can't use much whitespace between them. Cartographers and graphic designers have known this for ages. (Remember that colored backgrounds are also effective in defining Titled Sections.)

Specifically, alternating row colors help a user:

  • follow a row from left to right and back again, without getting the rows confused; and
  • see the "footprint" of the table itself, as separate from its containing page.

How:

Pick a pair of quiet, low-saturation colors that are similar in value, but not identical. (In other words, one needs to be a wee bit darker than the other.) Good choices are blue and white, beige and white, or two similar shades of gray -- assuming the text on top of them is dark, anyway. Generally, one of the colors is your page's background color.

Alternate the color from row to row. If the rows are thin, you could also experiment with grouping the rows: the first three are white, the next three are blue, etc.

This pattern pretty much eliminates the need for horizontal lines between the rows (though you could use that instead, if the lines are very thin and inconspicuous). If your columns are aligned with each other, you don't need vertical lines, either, nor a heavy border around the table -- the row colors will define the edges of the table for you.

Examples:


From http://mathworks.com