Hi there lzhang,
as you have posted this problem of yours in the 'Client Side Scripting' forum,
I presume that you must be looking for a dynamic solution. :agree:
If this is the case, then this is the solution...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>alternate table row background color</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#table1 {
border:1px solid #000;
margin:20px auto;
}
#table1 td {
width:100px;
height:30px;
border:1px solid #000;
text-align:center;
}
.blue {
background-color:#eef;
color:#000;
}
.white {
background-color:#fff;
color:#000;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {
var rows=document.getElementsByTagName('tr');
for(c=0;c<rows.length;c++) {
if(c%2==0) {
rows[c].className='blue';
}
else {
rows[c].className='white';
}
}
}
//-->
</script>
</head>
<body>
<table id="table1">
<tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr><tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr><tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr><tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr><tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr><tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr>
</table>
</body>
</html>