Account services

Sortable tables

Over time several different solutions have been developed to implement a mechanism to sort columns on tables. All have been slightly different, and therefore the user has had to learn more than one interface. No more. Eionet has made a house style to be followed by all. In developing the style we decided to satisfy the following requirements:

This is a table that implements the design:

Id Title Period Not sortable
C Middle Ages 600 - 1350 Wikipedia article
B Roman Age 500 BC - 600 Wikipedia article
H Unification/Union 1957 - Wikipedia article
G Industrial Revolution 1800 - 1970 Wikipedia article
F Enlightenment 1740 - 1800 Wikipedia article
E Colonial Expansion 1480 - 1580 Wikipedia article
D Renaissance 1380 - 1480 Wikipedia article
A Greek Period 1000 BC - 323 BC Wikipedia article

Freedoms and constraints

There is no requirement that the clickable row has the same colour scheme as you see on this website. You should select a set of colours that match the website you work on. As you can see, all the styling is done in CSS, and therefore your code won't be affected by future style changes. You should use the same arrows. They have been designed with transparency, and should work with most backgrounds.

You must make the row "stand out", to appear clickable. In the design it is done with an outset border. The hover colour should be just noticably darker or lighter than the default colour. When the user moves the mouse over the clickable area, he should notice, but not get annoyed.

A column should be sorted for the first click on the most commonly used sorting direction. This means titles are sorted a..z, but dates that are deadlines should arguably be sorted latest date first (z..a).

Explanations of features

Internet explorer 6 has a CSS bug that has the effect that only the first column heading is clickable in the entire area. However, this bug goes away when an image is included in the <a> tag. That is why we have a transparent placeholder for the arrows on the other columns.

For more fancy column heading with 3d effects, you can adapt the sliding door technique described on the A List Apart website.

The scope attributes are for disability access according to W3C's HTML Techniques for Web Content Accessibility. Don't forget to implement the tooltips. They are important to achieve good usability.

There are several techniques to implement the sorting mechanism. It is not important that you emulate the technique used in the example. What is important is the interaction with the user. There shall only be one arrow in the sortable column—not two. And the table must always be sorted on one of the sortable columns — even when the user hasn't specified a preference.

CSS for screen stylesheet

.sortable {
	border: 1px solid black;
	font-size: 0.9em;
	line-height:normal;
}
.sortable th {
	background: #ccc;
	border: 2px outset #999;
	margin:0;
	padding:0;
	white-space: nowrap;
	vertical-align: top;
}
.sortable th a:link, .sortable th a:visited, .sortable th span {
	display:block;
	text-decoration: none;
	font-weight: normal;
	color: black;
	padding:1px 0.5em;
}

.sortable th a:hover {
	color:white;
	background: #aaa;
}
.sortable tbody tr.zebraeven {
	background-color: white;
}

CSS for print stylesheet

.sortable img {
	display: none;
}

Standard data table for comparison

Header Header Header
Element Element Element
Element Element Element

Revision changes

After implementing the mechanism on a couple of large tables, it was discovered that it is necessary to make the individual rows stand out more clearly. Therefore zebrastribes have been added in revision 2. These are the changes since revision 1:

Revision 3

Revision 3 introduces the rel="nofollow" attribute on <a> tags. The purpose is to avoid getting identical, but differently sorted pages in the indexes of the search engines. The attribute is understood by Google, Yahoo and MSN.