Health and Safety
Executive / Commission
Styleguide
Why, when and how to use tables.
Tables are not used to control layout. Page layout is controlled via styles and CSS. Tables are used to represent ‘tabular data’. An example of such might be a timetable or timesheet.
When you have tables that contain lots of numerical data you may want to align data to the right of the cell
The choice of "grid", "row" or "column" determines what combination of cell borders are shown. See the examples below for illustrations of these layout differences.
| Day | Start | Finish | Time | |
|---|---|---|---|---|
| Hours | Minutes | |||
| Monday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Tuesday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Wednesday | 8:00 | 13:00 | 5 | 00 |
| 14:00 | 17:00 | 3 | 00 | |
| Total hours worked this week | 24 | 30 | ||
| Day | Start | Finish | Time | |
|---|---|---|---|---|
| Hours | Minutes | |||
| Monday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Tuesday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Wednesday | 8:00 | 13:00 | 5 | 00 |
| 14:00 | 17:00 | 3 | 00 | |
| Total hours worked this week | 24 | 30 | ||
| Day | Start | Finish | Time | |
|---|---|---|---|---|
| Hours | Minutes | |||
| Monday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Tuesday | 8:00 | 12:00 | 4 | 00 |
| 12:45 | 17:00 | 4 | 15 | |
| Wednesday | 8:00 | 13:00 | 5 | 00 |
| 14:00 | 17:00 | 3 | 00 | |
| Total hours worked this week | 24 | 30 | ||
Tables that contain a lot of text. For example, a list of favourite bands by genre and era. Where you want to left align the text.
The choice of "grid", "row" or "column" determines what combination of cell borders are shown. See the examples below for illustrations of these layout differences.
| Name | Band | Genre | Era |
|---|---|---|---|
| Hugh | Beetles | Pop | 1960s |
| Pugh | Abba | Pop | 1970s |
| Barney | Oasis | Rock | 1990s |
| Cuthbert | Pink Floyd | Rock | 1970s |
| Dibble | Echo and the Bunnymen | Indie pop | 1980s |
| Grub | Kasabian | Alternative Rock | 2000s |
| Name | Band | Genre | Era |
|---|---|---|---|
| Hugh | Beetles | Pop | 1960s |
| Pugh | Abba | Pop | 1970s |
| Barney | Oasis | Rock | 1990s |
| Cuthbert | Pink Floyd | Rock | 1970s |
| Dibble | Echo and the Bunnymen | Indie pop | 1980s |
| Grub | Kasabian | Alternative Rock | 2000s |
| Name | Band | Genre | Era |
|---|---|---|---|
| Hugh | Beetles | Pop | 1960s |
| Pugh | Abba | Pop | 1970s |
| Barney | Oasis | Rock | 1990s |
| Cuthbert | Pink Floyd | Rock | 1970s |
| Dibble | Echo and the Bunnymen | Indie pop | 1980s |
| Grub | Kasabian | Alternative Rock | 2000s |
These tables are manipulated dynamically by utilising JavaScript, and are styled "on-the-fly"
Use sortable tables to enable the user "sort" the data by column.
Sortable tables are more complex to build than others, and the technique should only be used on simple tables, not on tables that use row or column span. You need to first:
| Name | Band | Genre | Era |
|---|---|---|---|
| Hugh | Beetles | Pop | 1960s |
| Pugh | Abba | Pop | 1970s |
| Barney | Oasis | Rock | 1990s |
| Cuthbert | Pink Floyd | Rock | 1970s |
| Dibble | Echo and the Bunnymen | Indie pop | 1980s |
| Grub | Kasabian | Alternative Rock | 2000s |
When you have along list, and you want to hightlight alternate rows to make the data clearer to read use this feature.
This feature is particularly useful for tables that have to be updated regularly, where you don't want to manually code each row to give it a background colour.
| Name | Band | Genre | Era |
|---|---|---|---|
| Hugh | Beetles | Pop | 1960s |
| Pugh | Abba | Pop | 1970s |
| Barney | Oasis | Rock | 1990s |
| Cuthbert | Pink Floyd | Rock | 1970s |
| Dibble | Echo and the Bunnymen | Indie pop | 1980s |
| Grub | Kasabian | Alternative Rock | 2000s |
Try mixing and adding styles. It is possible to create a stripy sortable table using the following code: <table class="tablealpharow stripe tablesortable" id="uni_id1">
Both sortable and stripy tables require JavaScript to be enabled, browsers with JavaScript switched off will see only a simple non-stripped, non-sorted table.
All XHTML should be valid and well formed, therefore we do not specify or use attributes such as:
Tables should use headers and footers wherever possible.
As well as being well formed, the accessibility of a table can be improved with the addition of attributes such as:
Detailed guidance about the above is available from the Web Accessibility Initiative at: http://www.w3.org/TR/WCAG10-HTML-TECHS/#table
As ever, please "view source" to see how to code tables to make valid and accessible documents.