HTML table alternating row colors

Hi,

Seek help about how to have alternating group row colors. Have HTML table dynamically populated from database via coldfusion. 6 columns / 2 rows represent one row from database. Table header shows the database fields using horizontal ruler tag <hr>.
Want to have alternating row group colors for ease of recognition for users - eg - first two rows light gray - next two rows white - next two rows light gray - next two rows white and so on.
Code for table is below - any help on how to do this greatly appreciated!


<div style="width:900px; position:relative; ">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <cfinput type="submit" id="enter" name="decSend" value="Submit" style="font-size:14px; font-weight:bold;" >
<br /><p>
<table width="900" border="1" cellspacing="1" cellpadding="2" style="position:relative; left:50px">

<tr>
<td width="140" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Name<hr />Begin Date</font></td>
<td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Request Date<hr />End Date<font></td>
<td width="150" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">Type of Hrs<hr />Request Justification</font></td>
<td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;Number Hrs Req<hr />Rel Comp Begin Date</font></td>
<td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;Projects<hr />Rel Comp End Date</font></td>
<td width="220" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Decision<hr />Leave Slip Submitted</font></td>
</tr>
<cfoutput query="Req">
<tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
<td >&nbsp; #Name#</td>
<td >&nbsp; #DateFormat(RequestDate, "m/d/yyyy")#</td>
<td >&nbsp; #TypeofHours#</td>
<td>&nbsp; #NumberHrsRequested#</td>
<td>&nbsp; #project#</td>
<td>&nbsp; #Decision#
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="approved" size="1">Approved
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="denied" size="1">Denied
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="" size="1" checked="yes">N/A
</td>
</tr>
<tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
<td>&nbsp; #DateFormat(BeginDate, "m/d/yyyy")#</td>
<td>&nbsp; #DateFormat(EndDate, "m/d/yyyy")#</td>
<td>&nbsp; #justification#</td>
<td>&nbsp; #DateFormat(RCBDate, "m/d/yyyy")#</td>
<td>&nbsp; #DateFormat(RCEDate, "m/d/yyyy")#</td>
<td>&nbsp; #RCLeaveSlip#</td>
</tr>
</cfoutput>
</table>

</div>

Many thanks,
John

John,

I don't know coldfusion but i can give you basic pseudo code to give you an idea how to do this.


counter = 0
for each Row

if counter Modulus 4 is Less Than 2 Then
tr.class = 'lightGray'
else
tr.class = 'white'
end if

counter = counter + 1
next Row

where tr.class would output:
<tr class='lightGray'>....
or
<tr class='white'>...

in your css file
.lightGray{
background-color:#C0C0C0;
}

.white{
background-color:#FFFFFF;
}