Web 2.0 Tables

Have you ever seen a lot of information in a table on the web and wish that you can highlight just one row of that table? Looking very large tables, with out the ability to interact with the table, can make it hard to read the information provided. With a little bit of CSS and the hover and first-child pseudo classes, you can make tables interactive again. You visitors can read information from the table quicker, and it gives your tables a little Web 2.0 flare. Best of all it is easier then you think.

First, lets make a table with some information. In our table we are going to use the population and percentage of the population for Lexington, Kentucky. This information is coming from the 2000 census.

<table>
<tr>
<th>Age Group</th>
<th>Population</th>
<th>Percentage</th>
</tr>
<tr>
<td>0 - 5</td>
<td>16146</td>
<td>6.2%</td>
</tr>
<tr>
<td>5 - 9 </td>
<td>15711</td>
<td>6.03%</td>
</tr>
<tr>
<td>10 - 14 </td>
<td>14947</td>
<td>5.74%</td>
</tr>
<tr>
<td>15 - 19</td>
<td>18422</td>
<td>7.07%</td>
</tr>
<tr>
<td>20 - 24 </td>
<td>28355</td>
<td>10.88%</td>
</tr>
<tr>
<td>25 - 34 </td>
<td>44542</td>
<td>17.1%</td>
</tr>
<tr>
<td>35 - 44 </td>
<td>41824</td>
<td>16.05%</td>
</tr>
<tr>
<td>45 - 54 </td>
<td>34491</td>
<td>13.24%</td>
</tr>
<tr>
<td>55 - 59 </td>
<td>11275</td>
<td>4.33%</td>
</tr>
<tr>
<td>60 - 64 </td>
<td>8625</td>
<td>3.31%</td>
</tr>
<tr>
<td>65 - 74 </td>
<td>13890</td>
<td>5.33%</td>
</tr>
<tr>
<td>75 - 84 </td>
<td>9149</td>
<td>3.51%</td>
</tr>
<tr>
<td>85+</td>
<td>3135</td>
<td>1.2%</td>
</tr>
</table>

As you can see this is just a basic HTML table. We don’t have any borders are anything added to it. Just looking over this table can be confusing. Adding borders to the HTML may cut down on some of the confusion. You can also tell that the table is not very interactive, and is very bland. Before we create the CSS that will make this table interactive and give it a Web 2.0 flare, we need to go over two CSS pseudo classes.

The first pseudo class we are going to cover is hover. If you have used Javascript and used the onMouseOver event, hover is very similar to that. This pseudo class allows CSS attributes to be applied to an element when the user hovers (hence the name) their mouse over the element. The other pseudo class we are going to use is first-child. This pseudo class allows a designer to apply a still to the first child of an element. In our case the th element is the first child of the tr elements in our table. We will need this pseudo class for a work around once we start applying our CSS. Now on to the CSS.

The CSS for this effect is very simple, but very powerful. We are going to add the hover pseudo class to all the tr elements, that way when a user mouses over a cell in the table the entire row’s changes. To the user they are mousing over a cell in the table, but to the code they are mousing over the entire row. The following allows us to add this effect

tr:hover{
background-color: #FF0000;
color: #FFFFFF;
}

Simple right, well there is a little issue. When the user rolls over the table headers (th) they get the same effect. We don’t want this to occur, so this is where the first-child pseudo class comes into play. We can add both pseudo classes to tr entry in the style sheet to fix this “issue”.

tr:first-child:hover{
background-color: #FFFFFF;
color: #000000;
}

That will fix the issue with the table headers. To explain the code a little more, what is happening is the first-child pseudo class is being applied to the th elements since they are the first elements after the first tr element. The hover pseudo class will only be activated when the user mouses over the table header, and it is set with the default values for the attributes, before the hover pseudo class is activated. This code is actually being activated when the user mouses over it, but since the attributes are the same as when the user does not mouse over the table headers, the user does not even see the code in action.

If you wanted you could go a step further and add a hover pseudo class to the cell that the user is moused over of an additional effect. For this effect you could make the row either a different color, or make the row a lighter shade of the cell background color. Below is an example of the CSS code that will allow you to do this effect.

tr:first-child:hover{
background-color: white;
color: black;
}
tr:hover{
background-color: #FF0000;
color: #FFFFFF;
}
td{
border: black 1px solid;
text-align: center;
width: 100px;
}
td:hover{
background-color: #AA0000;
border: black 1px solid;
width: 100px;
}

A working version of the code can be found here. As you can see from the example, this small amount of code can make your site a lot more user friendly.