Data tables are useful when the data can be sorted by the table headers. This does not include any JavaScript libraries ($.stupidtable is used purely for demo purposes), but requires a particular HTML structure and set of classes.
Each table header that can be sorted must have a class of .data-table-sort and a <div class="data-table-sort-indicator></div>" wrapping its content. The classes .is-sorted-asc and .is-sorted-desc are added to the <th> element to denote which sorting method is currently active. See code below for a full example:
|
Engine
|
Browser
|
Platform(s)
|
Version |
Grade
|
|---|---|---|---|---|
| Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
| Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
| Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
| Trident | Internet Explorer 6 | Win 98+ | 6 | A |
| Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
| Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
| Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
| Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
| Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
| Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
| Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
| Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
| Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A |
| Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A |
| Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A |
| Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A |
| Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A |
| Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A |
| Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
| Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1.8 | A |
| Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
| Webkit | Safari 1.2 | OSX.3 | 125.5 | A |
| Webkit | Safari 1.3 | OSX.3 | 312.8 | A |
| Webkit | Safari 2.0 | OSX.4+ | 419.3 | A |
| Webkit | Safari 3.0 | OSX.4+ | 522.1 | A |
| Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A |
| Webkit | iPod Touch / iPhone | iPod | 420.1 | A |
| Webkit | S60 | S60 | 413 | A |
<table class="table data-table striped-table">
<thead>
<tr>
<th class="data-table-sort is-sorted-asc">
<div class="data-table-sort-indicator">Engine</div>
</th>
<th class="data-table-sort">
<div class="data-table-sort-indicator">Browser</div>
</th>
<th class="data-table-sort">
<div class="data-table-sort-indicator">Platform(s)</div>
</th>
<th>
Version
</th>
<th class="data-table-sort">
<div class="data-table-sort-indicator">Grade</div>
</th>
</tr>
</thead>
<tbody>
<!-- etc.. -->
</tbody>
</table>