ProblemYou 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 cellsSolutionCreate 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 rowsDiscussionThis 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 JavaScriptOther 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 solutionsAnother 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 AlsoThe CSS 3 specification for the nth-child pseudo-class selector at http://www.w3.org/TR/css3-selectors/#nth-child-pseudo. |