Files used

View Demo Here

After doing some research on doing this on my own site, I thought I would show the end product to everyone at

This can be accomplished in as little as 1 file or as many as 3. I am going to show how to do it using an external CSS. Of course you can just use inline styles do accomplish all of this.

The 1st page is the CSS. This just sets up the styling for the page color, font styles and coloring. The important part is the "hover style" at the bottom. This sets up the mouse over color change.
/******* simple page style *******/
   font-family: Arial,sans-serif;
   color: #000000;
   line-height: 1.166;
   margin: 0px;
   padding: 0px;
   background: #FFFFFF;

/******* hover style *******/
.mytable tr:hover { background-color: gray; }

The Second file contains the actual table. Here we will set up the database access and the dynamic table. Here I am using a simple last name and first name table for simplicity.

Simple Table Row Color changes on Hover</title>

   <!--- Set up the CSS external sheet. This is needed to make the mouse over work. If you do not want to use an external style sheet, you need to add .mytable tr:hover { background-color: gray; } to style tags --->
   <link rel="stylesheet" type="text/css" href="table_hover.css" />

<!--- Set up the Query for the table. Use your information here. Either thruough the Application.cfm file or hard coded. --->
   SELECT first_name, last_name
   ORDER BY last_name

<!--- Set up the Variables for the table row colors so users can change them easily. These are used to make the alternating rows in the table. It's always a good idea to use cfparam so there aren't any errors with unloaded variables. --->
<cfparam name = "tr1" default = 'bgcolor="##CCCCCC"'>
<cfparam name = "tr2" default = 'bgcolor="##FFFFFF"'>

<!--- Dynamically build the table. Make sure you use the mytable class so that it pulls the css from the external style sheet. --->
<table class="mytable" border="1">
Last Name</th>
First Name</th>

   <cfoutput query="names">
      <!--- Begin the row color changes using the variable we initialized above --->
<cfif (currentrow MOD 2) IS 1>





That's pretty much it. Simple isn't it!

About This Tutorial
Author: Michael Gomez
Skill Level: Beginner 
Platforms Tested: CF8
Total Views: 79,637
Submission Date: July 10, 2009
Last Update Date: July 10, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial

Website Designed and Developed by Pablo Varando.