JavaScript Tip:
Highlight Your Table Rows

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Tables in HTML were originally intended to organize and display columns of data on a Web page. But long columns of information can be extremely hard to read, especially if they span many rows and columns. Keep visitors oriented on your page with this bit of JavaScript code that highlights individual rows in your data table.

Move That Mouse

It's an amazingly simple technique that produces eye-catching results. Just include onMouseOver and onMouseOut events inside your TR tags. It's basically the same technique you use to create image rollovers, only you're changing the appearance of a table row instead of an image. It's helpful whenever you're displaying a complex data table.

For example, consider this data table from the UNICEF Web site that lists polio immunization schedules for children around the world. The whole table is 96 rows by 15 columns. The table is broken out by country and by month of scheduled immunizations. As you scroll through it, think how much easier it would be to read if you could highlight individual rows.

Here is the code for a few sample lines of the table. It includes the JavaScript events that create the highlight effect:

Note that some of the tags are empty, so we inserted a non-breaking space (  in HTML) to hold the cell open. Otherwise, you'd have a browser incompatibility problem because Netscape browsers collapse empty cells.

If you'd like to highlight individual cells instead of entire rows, include the JavaScript events inside your TD tags instead of the TR tags.

Now You See It, Now You Don't

Here's how the sample code looks on a Web page. Move your mouse over the rows below. If you're using a compatible browser, then you'll see the selected rows change color as you move your mouse over them. If your browser is not compatible, then you see a standard table.

Benefits And Browser Support

This technique is easy to implement, takes little or no JavaScript coding ability, and adds value to your page without adding a lot of extra code that could increase page download time.

It's also another useful technique that helps you make data tables more accessible to people with disabilities. Those with mobility or cognitive problems will appreciate your extra effort because the highlighted rows help them understand how the information fits together and/or help them maintain their orientation on a long Web page.

Most of the more recent browser versions support this technique on both Windows and Mac PC's. Here's a quick reference list:

Remember that WebTV offers incomplete JavaScript support, so you have to be careful. Still, these JavaScript events don't break your page; visitors with non-compliant browsers see a standard table.

That's not always the case. Other JavaScript, style sheets, or just plain HTML coding errors can cause much more serious problems. That's why we always recommend testing your page in as many browsers and operating systems as possible. Either test by hand or use Browser Photo to receive a report that shows you actual screen shots of your Web page in 14 different browsers and operating system combinations.

Careful testing will help you design Web pages that all visitors can easily understand and enjoy - not matter what browser they're using.