Highlight a whole table row and make it a hyperlink
Lengthy data tables are not the most user-friendly approach to presenting information, but they are widely accepted and therefore hard for designers to avoid.
Eric's Weblog explains how to extract a hyperlink from one cell in a table and apply it to the whole row. This achieves two usability goals: the user can highlight a table row by mousing over it, which aids in scanning; and the user can click anywhere in the row rather than having to select a link that might be in a different place in the row from where the user is reading.
Here's an example of a standard table layout. Imagine that a table containing detailed classifications could be quite complex. In this case, to view details the user has to move all the way to the far right column to find a link. In addition, the rows are not differentiated, which makes scanning difficult.
| Name | Species | Genus | Family | Wikipedia Link |
|---|---|---|---|---|
| Short-beaked Echidna | T. aculeatus | Tachyglossus | Tachyglossidae | learn more... |
| Western European Hedgehog | E. europaeus | Erinaceus | Erinaceidae | learn more... |
| Brazilian Porcupine | C. prehensilis | Coendou | Erethizontidae | learn more... |
Now the same table, with highlighting and whole row-link conversion in place:
| Name | Species | Genus | Family | Wikipedia Link |
|---|---|---|---|---|
| Short-beaked Echidna | T. aculeatus | Tachyglossus | Tachyglossidae | learn more... |
| Western European Hedgehog | E. europaeus | Erinaceus | Erinaceidae | learn more... |
| Brazilian Porcupine | C. prehensilis | Coendou | Erethizontidae | learn more... |
To set this up, copy the styles and script from the Head section of this page, or use Eric's example. A few implementation issues:
- Change the ID in the first line of the javascript to match the ID of the table you want to apply it to.
- For multiple tables on the same page, duplicate the javascript function and rename each one with a different ID (table1, table2), then repeat step 1.
- Create a CSS style called
tr.highlightand set the cursor style topointerso the hyperlink looks like a hyperlink. Without this the user won't know the row is clickable.
For an even more user-friendly table presentation, combine this technique with the sortable table rows technique. Your users will thank you.
<- back to index | ©2006 clg.