Alternating Row Colors

A great tutorial that is found in many places, but I thought I'd also add to our listings is the alternating row color tutorial. What is this you ask?

Well, this tutorial demonstrates how to alternate colors in a table when you are displaying records. Take a look at the two examples below, which do you think looks nicer and easier to read?

 This is a table of fake users: 1 John Smith 2 Jon Doe 3 Jane Doe 4 Dennis the Menace 5 John Wayne
(Without alternating row colors)
 This is a table of fake users: 1 John Smith 2 John Doe 3 Jane Doe 4 Dennis the Menace 5 John Wayne
(With alternating row colors)

Now you can get this effect very easily and very fast! :)

Let me show you how:

The first thing you'll need to do is to create your usual query. Let's make a fake query now:
<cfquery name="qMyQuery" datasource="myDSN">
SELECT     *
FROM        MyTable
ORDER BY  FieldName
</cfquery>

Ok, now comes the alternating row color trick:

<table border="0" width="100%">
<tr>
<td width=
"100%" bgcolor="#808080" colspan="2">
<font size="2" face="Verdana">
<b> This is a table of fake users:</b>
</font>
</td>
</tr>

<cfoutput query="qMyQuery">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td width=
"4%">
<font size="2" face="Verdana">1</font>
</td>
<td width=
"96%">

<font size="2" face="Verdana">John Smith</font>
</td>
</tr>

</cfoutput>
</table>

Now the magic code takes place in the BOLD/RED text above. It's that simple, that's all you need to alternate row colors!