• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

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!

Questions? Comments? Email me: webmaster@easycfm.com