Creating Alternating Background Colors in Table Rows






Creating Alternating Background Colors in Table Rows

Problem

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

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 class="dltprod">
  <p>Item added on March 22, 2006.</p>
  <a href="" title="Delete this product"><img src="x.gif" alt="delete" 
class="dltitem" /></a>
 </td>
 <td class="prodcell">
  <img class="prod" alt="product image" src="u2-dismantle.jpg" />
  <div class="prodtitle"><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 class="odd">
 <td class="dltprod">
  <p>Item added on March 22, 2006.</p>
  <a href="" title="Delete this product"><img src="x.gif" alt="delete" 
class="dltitem" /></a>
 </td>
 <td class="prodcell">
  <img class="prod" alt="product image" src="apple-whenthepawn.jpg" />
  <div class="prodtitle"><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>  

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.

See Also

The CSS 3 specification for the nth-child pseudo-class selector at http://www.w3.org/TR/css3-selectors/#nth-child-pseudo.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows