Create two styles for two alternate outputs (even and odd)
The alternate style can be a table row, a layer, a paragraph or any other HTML element on the page.
<style type="text/css">
#myRows p {padding: 4px; margin: 0;}
.evenRow {background: #ff7d3e}
.oddRow {background: #ffb03b}
</style>
JQuery
Add a link to the JQuery file
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Create a function to add the class for the even and the odd element
<script type="text/javascript">
$(document).ready(function(){
$("p:even").addClass("evenRow");
$("p:odd").addClass("oddRow");
});
</script>>
Example 1
Here an example of displaying each paragraph with a different style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alternate Rows</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myRows p:even").addClass("evenRow");
$("#myRows p:odd").addClass("oddRow");
});
</script>
<style type="text/css">
#myRows {margin: auto; width: 440px; border: 1px solid #999; padding: 10px;}
#myRows p {margin: 0; padding: 10px; color: #fff; font-weight: bold;}
.evenRow {background: #ff7d3e}
.oddRow {background: #ffb03b}
</style>
</head>
<body>
<div id="myRows">
<p>First row</p>
<p>Second row</p>
<p>Third row</p>
<p>Fourth row</p>
<p>Fifth row</p>
</div>
</body>
</html>
Demonstration
First row
Second row
Third row
Fourth row
Fifth row
Example 2
Here another example with table rows <tr>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alternate Rows</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myMovieList tr:even").addClass("evenRow");
$("#myMovieList tr:odd").addClass("oddRow");
});
</script>
<style type="text/css">
.evenRow {background: #ff7d3e;}
.oddRow {background: #ffb03b;}
.header {background: #934900; color: #ccc; font-weight: bold; padding: 4px;}
td {padding: 4px;}
</style>
</head>
<body>
<div id="myMovieList">
<table width="848" border="0" cellspacing="1" cellpadding="1">
<tr>
<td class="header">Movie Title</td>
<td class="header">Year</td>
<td class="header">Director</td>
</tr>
<tr>
<td>Casablanca</td>
<td>1942</td>
<td>Michael Curtiz</td>
</tr>
<tr>
<td>The Godfather</td>
<td>1974</td>
<td>Francis Ford Coppola</td>
</tr>
<tr>
<td>North by Northwest</td>
<td>1959</td>
<td>Alfred Hitchcock</td>
</tr>
<tr>
<td>Citizen Kane</td>
<td>1941</td>
<td>Orson Welles</td>
</tr>
<tr>
<td>Lawrence of Arabia</td>
<td>1962</td>
<td>David Lean</td>
</tr>
</table>
</div>
</body>
</html>
Demonstration
| Movie Title | Year | Director |
| Casablanca | 1942 | Michael Curtiz |
| The Godfather | 1974 | Francis Ford Coppola |
| North by Northwest | 1959 | Alfred Hitchcock |
| Citizen Kane | 1941 | Orson Welles |
| Lawrence of Arabia | 1962 | David Lean |
About this method
This method is not really useful for static tables, because you can apply styles yourself for each table row. But it is useful to display records from a database.
Tip
There is a trick you can use to display each row of the table with alternate styles and at the same time each table cell in that row with a different style.