page 1 of 3 Table Column Rollover

Table of Contents

Introduction

Situation: A project requires the columns of a table change background and text colors when the cursor is over them.

This is a continuation from the tutorial on Table Row Rollovers. Instead of affecting a row, a column is highlighted. Highlighting a column is more difficult or at least the methods available are limit compared to highlighting a row. For the best cross browser support and greatest flexibility, JavaScript has to be used. There are two approaches available to us.

Apply the highlight style to the col or the colgroup element.
Walk down the rows applying the highlight style to each cell the makes up the column.

The colgroup and col tags are intended to style columns. Support is limited and few properties can actually be styled through the col and colgroup tags. Only the background color can be reliably change. Some browsers, IE for one, will change the text color as well. There is no way to override styles applied to rows or cells as we had in highlighting rows. None the less, the first example will use the <col> tag so this option is covered. It can be useful in limited situations.

The script for walking the rows and highlighting each cell in a column follows. It is also the bases for the method to highlight both columns and rows that is shown later.