If your web applications contain tables, here’s an easy way to spice up those applications and make them easier to navigate. Making only a few changes to your style sheet and HTML presentation layer, we can create table rows that change color when scrolled over. For example, click the image below to examine two different tables side-by-side.
Table comparison
Notice how in the second table the rows are different colors and turn blue when you scroll the mouse over. Doesn’t that look 10 times better than the first, plain table? This simple effect helps liven up the application, while making it easier for users to see which row they have selected. The best part: It’s very simple to create!
Instructions
First, just add a couple new classes to your style sheet: One for odd-numbered rows and another for even-numbered rows. We will assign a different background color for each to make it easier for the user to differentiate between the rows. Then, we need to assign a “:hover” to each class. This will make the rows turn a different color when the mouse hovers over them. Here’s what you should add to your style sheet:
tr.one {background-color: #f9fbfd; color: black;}
tr.one:hover {background-color: #407293; color: white;}
tr.two {background-color: #e3eaf1; color: black;}
tr.two:hover {background-color: #407293; color: white;}
Once that has been added to your style sheet, all you need to do is add the new classes to alternating table rows in your HTML. Using the example above, the table rows should look like this:
<tr class="one"> <td>first row, first cell</td> <td>first row, second cell</td> <td>first row, third cell</td> </tr> <tr class="two"> <td>second row, first cell</td> <td>second row, second cell</td> <td>second row, third cell</td> </tr> <tr class="one"> <td>third row, first cell</td> <td>third row, second cell</td> <td>third row, third cell</td> </tr> <tr class="two"> <td>fourth row, first cell</td> <td>fourth row, second cell</td> <td>fourth row, third cell</td> </tr>
That’s all there is to it! As you can see, this is a quick and easy way to spice up tables used in your web applications. This method not only looks better than a typical table, but it also makes navigation easier for your users.
**Note:** If this doesn’t work in Internet Explorer, make sure that you are using a “transitional” doctype. In order to specify a transitional doctype, you must add the following at the very top of your HTML document, right before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">