• Services
  • Helpdesk
  • Forum
  • Projects
  • Roles (Restricted)
  • Workplan
  • Subscriptions
  • News
  • Calendar
  • Training
  • NFP mails
  • Archived IGs
• Reportnet
  • CDR Repository
  • ROD Obligations
  • Data Dictionary
  • ETC Data Dictionary
  • Content Registry
  • Conversion service
  • Mediterranean Data Repository
  • Dam Positioning
  • UWWTD dataflow
  • Reportnet Documents
• Tools
  • GIS
  • SEIS
  • Software
  • SVN Repository
  • Task Management
  • Design Guidelines
  • Standards
  • Continuous Integration
  • GEMET Thesaurus
• Topics (ETCs)
  • Air pollution and Climate Change mitigation
  • Biological Diversity
  • Climate Change impacts, vulnerability and Adaptation
  • Inland, Coastal and Marine waters
  • Spatial Information and Analysis
  • Sustainable Consumption and Production

Source: Paul The Wine Guy. Some rights reserved

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:

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.

This table is copied from here: http://reports.eea.europa.eu/92-9167-066-9/en/page001.html.

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.

The example is copied and adjusted from http://reports.eea.europa.eu/GH-98-96-518-EN-C/en/page007.html

Numbers

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