Dave Massy
Microsoft Corporation
July 24, 2001
Ever find yourself staring at a table of statistical data, straining to fathom its full implications? If so, you're not alone. A static table of data displayed on the screen doesn't always lend itself to ready comprehension. There are, however, some cool, dynamic behaviors you can apply to standard HTML tables that will allow your users to see the data in a variety of ways. These behaviors not only add interest, they can help considerably in reading and comparing data in a table. This month we'll take a look at these behaviors, and how you can use them to make your tables communicate—dynamically.
Before we look at these behaviors in detail, let's recall what a behavior is and the benefits it can bring to a DHTML page. The best way to think of a behavior is as a reusable DHTML component. There are two types of behavior: attached behaviors and element behaviors. Attached behaviors were introduced in Microsoft® Internet Explorer 5.0 and can be attached to any element in the HTML document using cascading style sheets (CSS) to add to the functionality of that element. Element behaviors were introduced in Internet Explorer 5.5, and take the concept further with the ability to implement your own custom elements for use in an HTML Document. For more information, see DHTML Behaviors.
The behaviors we'll look at in this article are all attached behaviors, so they will work in Internet Explorer 5.0 or later, and are implemented as HTML components, often referred to as HTC files. Because they are implemented as HTC files, they can be deployed on a server alongside the HTML files that use them, without any installation on the client machine. We will look at three behaviors: a highlighter, a sort function, and a column drag behavior. All three are written as HTML Component (HTC) files and therefore require no additional installation. They simply need to be placed on the server along with the HTML files. The files are published here, so you can take a close look at how they work (in any text editor), and modify them if you wish to change or add new functionality.
Note These behaviors will work in Microsoft Internet Explorer for Windows version 5.0 or later. Because they are attached behaviors, when viewed in other browsers, users will see the original table displayed as it was authored, without the added dynamic functionality.
Highlighter
The first behavior we'll look at is the highlighter.
View the code.
View the sample.
First, run the qualhl.htm file and you'll see a standard table of data. Now mouse over some of the rows of data; the rows highlight, visually aligning the data on one row. Now click on the row; the clicked row remains highlighted in a different color.
Utilizing this behavior is simple. Here's the relevant code from the HTML file:
<TABLE style="behavior:url(tablehl.htc);" slcolor='#FFFFCC' hlcolor='#BEC5DE' >
The table tag includes a style that attaches the behavior by pointing to the tablehl.htc file, which adds the highlighting functionality. The behavior takes note of two attributes: the hlcolor, which defines the color of the mouseover highlighting, and the slcolor, which defines the color of the row selected by the mouse click. There is also an event that fires on the table called onrowselect when the mouse is clicked on a particular row. You can handle the event in your own script on the page if you wish.
I won't go into the details of how the behavior itself works, but if you take a look at the .htc file in any text editor, you can see that it changes the background color of the rows of the table appropriately through the use of runtimeStyle, and exposes the properties at the top of the file.
Sorter
The sorter behavior does something a little more interesting, as it allows sorting to take place on the head of the table, based on the column contents.
View the code.
View the sample.
By running the qualsort.htm, you can see that with this behavior attached to the table, clicking any column head in the table results in the content sorting accordingly. Attaching this behavior to the table is equally simple:
<TABLE style="behavior:url(sort.htc);" >
It does require that the table be well formed using THEAD to define the column head, and TBODY to contain the rest of the table data.
The behavior itself enacts a simple sort algorithm, but uses the DHTML Object Model to adjust the content of the HTML table to the appropriate order when a head is clicked. We also make use of some small image files to indicate at the top of the column the sort key and the direction of the sort.
This ability to sort data in tables is helpful in making sense of complex sets of statistics.
Drag
The third behavior I want to show here for tables is a little more fun.
View the code.
View the sample.
If you open qualdrag.htm, you will find that you can drag any of the heads to another column, thus rearranging the table.
Once again, attaching this behavior to a standard table that uses a THEAD and a TBODY is easy:
<TABLE style="behavior:url(sort.htc);" >
The behavior exposes a dragcolor attribute, so the color of the target can be specified.
Since an HTML table is laid out in row order, and not in column order, the manipulations of the content of the table are a little more complex in this behavior than with the sort functionality.
Together
Because these behaviors have been written as separate components, they can be combined on the same table by using the following syntax:
<TABLE style="behavior:url(dragdrop.htc) url(tablehl.htc) url(sort.htc);" >
View the sample.
This CSS syntax allows complimentary behaviors to be used on the same tag without separating out different elements. Further, if you are always going to use these behaviors together, we can combine their functionality into one single .htc file.
View the code.
View the sample.
If you open Qual.htm, you will find all three behaviors attached to the table.
Make Your Own Modifications
These behaviors, which came from an IE team demonstration, show the power of DHTML and attached behaviors, and are a great example of how you can add functionality to an ordinary HTML page and still have it display fine in older browsers. You are free to make use of these behaviors in your own pages, and I encourage you to make your own modifications as well. If you do make any interesting modifications, let me know at DHTMLDud@Microsoft.com. (Please understand, though, that I can't guarantee a response to every submission).
DHTML Dude