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
class="datatable" on your
<table> element, it will go
into effect for both screen and print media.
<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>
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.
This table is copied from here: http://reports.eea.europa.eu/92-9167-066-9/en/page001.html.
|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
|final draft||12 Dec. 1996|
|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
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
% 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
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.
This table has both column and row headings. Notice how
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
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
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
<td>. If it is both a sum and a number, then you enter
class="sum number" to both
justify right and make it bold.
The example is copied and adjusted from http://reports.eea.europa.eu/GH-98-96-518-EN-C/en/page007.html
|COUNTRY||(Mio t CO2)|
To make numbers align to the right, use
<td class="number">. To center a column,
Document last modified 2008/01/26. Content in this portal is modified daily by a community of providers.