Account services

Data table styling

There are still websites on Eionet that uses tables to position elements on the page. It is not possible to style tables to look good for data, as it has sideeffects. To get around this problem, we have implemented a datatable class in CSS and if you declare class="datatable" on your <table> element, it will go into effect for both screen and print media.

Quick example

<table class="datatable">
 <col style="width:10em"/>
 <col style="width:10em"/>
 <tr>
  <th scope="row" class="scope-row">Heading</th>
  <td>Data</td>
 </tr>
</table>

Produces:

Heading Data

Typical data table

Here is a typical column oriented table. Take a look at the source of this page. Notice how it uses <tr class="zebraodd"> and <tr class="zebraeven"> to implement zebra stribes. Zebra stribes are optional. Notice also how we have used <col/> to set the column widths. There are several benefits to doing it this way. First, you can adjust it in one place, and since we use em units, it also looks nice when printed eventhough print has a different font face and size. The em is defined as the width of an 'M' in the relevant font.

Type of product Title Main user Status Delivery date
Topic Reports CORINE land cover Directory 1996 MS, Public final draft 12 Dec. 1996
Assessment report on Land Cover results EC, MS, Public final draft 12 Dec. 1996
Technical Reports Quality Assurance / Quality Control EEA/ETC
Nat. Teams
final draft 12 Dec. 1996
Updating EEA/ETC
Nat. Teams
final draft 12 Dec. 1996
CORINE LC 4th & 5th level Nomenclature Nat. Teams final draft 12 Dec. 1996
Database CORINE Land Cover EC, EEA, MS, Public available 15 Dec 1996
Applications Homepage EC, MS, Public accessible on WWW 8 June 1996
Newsletter ETC LC Newsletter Issue 1, 2 and 3 Public printed Dec. 1995
Jun. 1996
Oct. 1996

Now try print preview.

To set the width of a column you use <col style="width:7em"/> for each column in the table. You put the <col> between the <table> and <thead> tags. You can use em or % units. Don't use px units, as the column width won't change if the user changes the font size. You can try it yourself. Hold down the Ctrl-key and turn the mouse wheel towards you.

There are some things you need to be aware of with <col/> and <colgroup>. Only the border, background, width and visibility properties can be used. You might be tempted to use text-align: right, but it doesn't work on all browsers.

What does the <thead> and <tbody> tags do? They are used when you have a column oriented table such as the one above. <thead> simply ensures that the table heading is shown on the following pages when the webpage is printed.

More complex table

This table has both column and row headings. Notice how scope="col" and scope="row" is used to make the headings adjust respectively centred and left. Unfortunately, Internet Explorer 6 doesn't understand the hint in CSS, so to make it obey, we must also simulate the scope with a class. Therefore, whenever you use scope="row", then also have a class="scope-row" as well. The column oriented table is the most common, so you can get away with not using scope or class="scope-col" on a column heading, as we make headers default to centered alignment, but for the sake of neatliness, please use it.

The second complexity on the table below, is that it has numeric table data. We want to make it right justify, so how do we do that? You put a class="number" on the <td>. Then the cell is right justified. If you have a row that functions as a summary, then you put class="sum" on the <tr> or <td>. If it is both a sum and a number, then you enter class="sum number" to both justify right and make it bold.

COUNTRY (Mio t CO2)
1985 1990 1994
Austria 54 58 57
Belgium 105 111 117
Denmark 61 53 63
Finland 48 53 61
France 378 368 349
Germany 1088 992 897
Greece 58 73 78
Ireland 26 31 32
Italy 350 402 393
Luxembourg 12 12 12
Netherlands 145 157 164
Portugal 26 40 45
Spain 183 209 229
Sweden 60 52 56
United Kingdom 556 579 550
EU15 total 3150 3190 3103

Numbers

To make numbers align to the right, use <td class="number">. To center a column, use <td class="center">.