Sortable Tables
Using lengthy tables to display data on the web is a common but user-unfriendly practice. Often data tables are too long to visually scan, and they raise more questions than they answer. For example, in the browser usage statistics table below: What browser is used by the most people? What is the trend for Firefox? What about IE7?
One solution is to make the table sortable. This way the user can manipulate the order of the table elements and answer at least some of her questions.
There are many solutions out there for table sorting, but this one is particularly easy to implement without much knowledge of javascript. There are only 4 steps:
- Download the external javascript file from kryogenix.org (updated April 2007).
- Add a reference to this file in the HEAD section of the page:
<script src="sorttable.js"></script> - Add
<table class="sortable">to the table tag, and make sure the table has an ID (name doesn't matter). - Add CSS styling to make the table look nicer. Done!
| 2006 | IE7 | IE6 | IE5 | Firefox | Mozilla | Netscape | Opera |
| May | 1.1% | 56.7% | 4.5% | 25.7% | 2.3% | 0.3% | 1.5% |
| April | 0.7% | 57.3% | 5.0% | 25.2% | 2.5% | 0.4% | 1.5% |
| March | 0.6% | 58.8% | 5.3% | 24.5% | 2.4% | 0.5% | 1.5% |
| February | 0.5% | 59.5% | 5.7% | 25.1% | 2.9% | 0.4% | 1.5% |
| January | 0.2% | 60.3% | 5.5% | 25.0% | 3.1% | 0.5% | 1.6% |
Reset table to original order.
Browser statistics from w3schools.com.
<- back to index | ©2006 clg.