Something I like to incorporate on web sites with tables is automatic background highlighting of the row that the mouse is hovering over. This is easy to do with CSS:

table.hover tr:hover
{
background-color:#ffffcc;
}

All you need to do is give your table tag the hover class, and your mouseover hover background color works!

In all browsers except IE6, of course. IE6 only supports the :hover pseudo-class on anchor () tags. (There’s lots of other things that IE doesn’t support or supports wrong, but that’s a story for another day.)

How can we get IE6 to hover our table rows? By using a little JavaScript and the Prototype library. Our solution requires two steps:

Write some code to automatically detect mouseover and mouseout events on table rows, applying and removing a CSS class to the rows as the events occur.
Add the CSS class to our CSS file.

First we’ll add a tr.hover declaration to our CSS.

table.hover tr:hover, table.hover tr.hover
{
background-color:#ffffcc;
}

Notice that I kept the table.hover parent selector; this . . .

→ Read More: An IE6-compatible solution for :hover

I’m a big fan of TableKit, a JavaScript library (based on Prototype) that provides client-side sorting, row striping, column resizing, and more. (Check out their demo to see more.) There’s one feature I needed on a recent project that was missing: the ability to stripe column groups (defined with the colgroup tag) with alternating background colors (as you would stripe rows of alternating colors). It was easy to add this functionality to TableKit by adding the following JavaScript code to the TableKit library.

TableKit.ColGroups = {
stripe : function(table) {
var colgroups = table.getElementsBySelector('colgroup');
colgroups.each(function(cg,i) {
TableKit.ColGroups.addStripeClass(table,cg,i);
});
},
addStripeClass : function(t,cg,i) {
t = t || cg.up('table');
var op = TableKit.option('colgroupEvenClass colgroupOddClass', t.id);
$(cg).removeClassName(op[0]).removeClassName(op[1]).addClassName(
((i+1)%2 === 0 ? op[0] : op[1]));
},
hide : function(colgroup) {
Element.setStyle(colgroup,{visibility:'collapse'});
}
};

The code above expects two new TableKit options, named colgroupEvenClass and colgroupOddClass. To add those as available options to TableKit, find the section of code below and add the two lines named colgroupEvenClass and colgroupOddClass.

…
options : {
autoLoad : true,
stripe : true,
sortable : true,
resizable : true,
editable . . .

→ Read More: Customizing TableKit to stripe column groups