Table Cell Links

Question: How can I make an entire table cell change colors when the user mouses over it? This example illustrates how to use an entire table cell as a link and to have it change color with the user's mouse passes over the cell.

This example uses no JavaScript and works in all modern browsers. Note, of course, Netscape Navigator version 4.x is not a modern browser. Netscape v4.x will still be able to use the link normally. It just won't change colors, or use the entire cell. It will use just the text, like a normal link.

Relevant CSS for the above example is as follows:

table.navbar {
   border-collapse: collapse;
}
table.navbar td {
   border: 1px solid #ccc;
}
table.navbar td a{
   display: block;
   width: 9em;
   padding: 3px;
   text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
   color: #fff;
   background-color: #666;
}

The example uses a nested table that contains the links. Apply the "navbar" class to that nested table and all the links in it appear to use the entire cell for a link.