第一种（CSS+JS）：
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<style>
.t1 {background-color:#336699text-align:center}
.t2 {background-color:#ffcc00text-align:center}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
<tr><td>aaaaaaaaaaa</td></tr>
<tr><td>bbbbbbbbbbb</td></tr>
</table>
<script Language="Javascript">
for (i=0i<table1.rows.lengthi++) {
(i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2")
}
</script>
</body>
</html>
第二种（CSS）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
table{
width:100%
}
.t1{
background:#ff6600
color:black
}
.t2{
background:#336699
color:white
}
</style>
</HEAD>
<BODY>
<TABLE cellpadding="0" cellspacing="0">
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t1">
<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
<TR class="t2">
<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
第三种（CSS+JS）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>表格隔行换色</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapseborder:solid #999border-width:1px 0 0 1px}
table td {border:solid #999border-width:0 1px 1px 0}
tr.t1 td {background-color:#fff}/* 第一行的背景色 */
tr.t2 td {background-color:#eee}/* 第二行的背景色 */
tr.t3 td {background-color:#ccc}/* 鼠标经过时的背景色 */
-->
</style>
</head>
<body>
<table id="tab">
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr")
function $() {
for (i=1i<Ptr.length+1i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2"
}
}
window.onload=$
for(var i=0i<Ptr.lengthi++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className
this.className = "t3"
}
Ptr[i].onmouseout=function(){
this.className=this.tmpClass
}
}
//-->
</script>
</body>
</html>
