SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Table Highlights
By Scott Isaacs

With Dynamic HTML and Internet Explorer 4.0 you can add row and column highlighting to HTML tables. Row and column highlighting is a useful user-interface gesture for telling the user something will happen if they click on the row or column. In this article, we will explain how to add and customize the highlights, and at the end provide a demonstration using databinding and column highlights.

To demonstrate column and row highlighting, in Internet Explorer 4.0, move the mouse over the following table:
Column 1Column 2Column 3
Item 1Item 2Item 3
Item 1Item 2Item 3
Item 1Item 2Item 3
Item 1Item 2Item 3

The column highlighting occurs when you move over the column headers in the first row. Moving over any other cell highlights the row. The cells representing the column headers are specified using the TH (Table Head) element. Furthermore, each column is defined using the HTML 4.0 COL element. By using the COL element, the color of the complete column can be specified as the style of a single element. Without the COL element, the cell in each row for the column would need to be individually updated. Next we take you through the details for creating the highlight effect.