Matt BurelloMatthew Burello
 
 
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!

Latest Innovations