Helen M. Overland

ColdFusion Tips and Tricks

How to...

Display Alternating Row Colours
Easily in ColdFusion

By: Helen M. Overland
Wednesday, October 12, 2005


When developing ColdFusion applications, it is frequently necessary to display a data report table. It is generally good practice to alternate the background colour of each row, as the end user will usually find the table easier to read.

There are many ways to do this, and they are all perfectly valid. I find, however, that the following method is a neat, quick, and highly flexible method that does not add much complexity to the code.

First, we create a class in our stylesheet. This will enable us to change the row colours at any future time with the absolute minimum amount of redevelopment time.

Add the following class to your stylesheet:

.alt {
	background: #E0E0E0;
}

Now all we have to do is add the class to each alternating row:

<table border="0" align="center">
   <cfoutput query="myquery">
      <tr<cfif currentrow mod 2> class="alt"</cfif>>
         <td>#data1#</td>
         <td>#data2#</td>
         <td>#data3#</td>
      </tr>
   </cfoutput>
</table>

This will produce a table something like the following:

data1	data2	data3
data1	data2	data3
data1	data2	data3

This can be especially compelling when styles are applied effectively:

Header1	Header2	Header3
data1	data2	data3
data1	data2	data3
data1	data2	data3

Why use a ColdFusion/Stylesheet combination?
When an effective stylesheet solution is applied to each table in your application, you have a completely scalable display set that can be easily adjusted for multiple applications. This will help reduce development time by increasing the portability of your code.


Here is the code for the table above:

.report {
	background: #F7EAE2;
	border: 1px solid #A64810;
}
th {
	background: #A03900;
	color: #FFFFFF;
	font-weight: bold;
}
.alt {
	background: #FFFFFF;
}

<table border="0" cellpadding="4" cellspacing="0"
 align="center" class="report">
   <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
   </tr>

   <cfoutput query="myquery">
      <tr<cfif currentrow mod 2> class="alt"</cfif>>
         <td>#data1#</td>
         <td>#data2#</td>
         <td>#data3#</td>
      </tr>
   </cfoutput>
</table>

SEO Search:    Search the Web with an SEO Focus: