Recipe 8.8. Creating Alternating Background Colors in Table Rows

Problem

You want to have table rows with alternating background colors, so that the table in Figure 8-7 looks more like the table in Figure 8-8.

Figure 8-7. A table without any color in the background cells

Solution

Create a class selector specifically designed for odd-numbered table rows:

tr {  background-color: #eee;  } tr.odd {  background-color: #ccc;  }

Then append every other table row with a class attribute with odd set as its value:

<tr>  <td >   <p>Item added on March 22, 2006.</p>   <a href="" title="Delete this product"><img src="/books/3/27/1/html/2/x.gif" alt="delete"   /></a>  </td>  <td >   <img  alt="product image" src="/books/3/27/1/html/2/u2-dismantle.jpg" />   <div ><a href="/product.php?id=B0006399FS">How  to Dismantle an Atomic Bomb</a></div>    ~ <strong>U2</strong>  </td>  <td><input type="text" value="1" name="qty" size="2" /></td>  <td>$9.66</td> </tr> <tr >  <td >   <p>Item added on March 22, 2006.</p>   <a href="" title="Delete this product"><img src="/books/3/27/1/html/2/x.gif" alt="delete"   /></a>  </td>  <td >   <img  alt="product image" src="/books/3/27/1/html/2/apple-whenthepawn.jpg" />   <div ><a href="/product.php?id=B00002MZ4W">When The Pawn  Hits...</a></div>   ~ <strong>Fiona Apple</strong>  </td>  <td><input type="text" value="1" name="qty" size="2" /></td>  <td>$7.97</td> </tr>

Figure 8-8. Alternating colors in the table rows

Discussion

This solution of marking up every other tr element, while laborious for long tables if handcoded, ensures cross-browser compatibility.

A second solution helps eliminate the need for extra markup within an HTML table. Using a selector, nth-child, noted in the CSS 3 specification, the solution is straightforward:

tr {  background-color: #eee;  } tr:nth-child(odd) {  background-color: #ccc;  }

However, support for CSS 3 is limited. Internet Explorer 6 for Windows and previous versions do not support this selector so cross-browser compatibility is an issue.

Using JavaScript

Other solutions go beyond just CSS. One solution is the use of JavaScript that interacts with the Document Object Model (DOM) and automatically applies the styles to every other table row. You can find one such solution at http://www.alistapart.com/articles/zebratables. The downside to this solution is that it will fail if the user has disabled JavaScript in their browser.

Using server-side solutions

Another programming solution would be to use a server-side programming language like PHP or ColdFusion to write a simple script that automates the generation of the table. (This technique is also beneficial if a backend database is being used to create and maintain the tabular data.) For a PHP solution to this exercise see http://www.phpfreaks.com/tutorials/5/0.php.