Sometimes the simplest items end up making the best blog posts. Lately I’ve really started to enjoy giving a mouse-over effect to each row in a table. (This could be in part because I frequently include links in my tables.) This practice certainly can’t replace the techniques that a web designer uses to make tables legible when the mouse pointer is off on some other part of the screen, but I think of it as a nice little extra.

First here’s an overview/refresher on a few of the most common methods for making a table easy to read:

Row Borders

This direct approach involves placing a line between each row, providing a guide for your eye to follow.

td { border-top-width: 1px; border-top-style: solid; border-top-color: #036; }

Zebra Tables

As noted by David F. Miller in his List Apart article on zebra tables, this is the approach that iTunes takes. Each row is an alternating color. To use the code below, make sure in your HTML that every other tr tag has the class alt.

tr.alt td { background-color: #ccf; }

Row Spacing

Usually not very popular because it can quickly eat up vertical real estate, the idea here is to space each row far enough apart, that your eye can easily follow the data on a single row.

td { padding: 15px 5px; }

Mouse-over

A mouse-over or hover effect on table rows can be used in combination with any of the above approaches (and usually is). When your mouse moves over a row, the background color changes.

tr:hover td { background-color: #ccc; }

Yes? You have a question there in the back? Well, no, this solution doesn’t work on every browser, most notably IE6. It does work on IE7, though, which is being adopted pretty quickly. Firefox, Safari, and Netscape all handle it. It also degrades gracefully on browsers that don’t recognize the hover pseudo class applied to a tr tag.

I don’t worry too much about it because I view the mouse-over color change for a row as a cool add-on. Your table should still be easy to read without it.

Not satisfied? Well, I commend you on your dedication to providing a consistent experience to all users regardless of browser preference. If you’re willing to dive into a little Javascript, here’s another approach.

filed under: Web Development