HTML tables

Table formatting is used in the layout of websites for a variety of reasons. Displaying data in tabular format is only one use, and designers often use it to physically structure the layout of a page.

To ensure that pages remain usable for all, it is important to use tables correctly and with restraint.

Use each checklist to ensure that your web pages comply with these guidelines

Checklist and summary: Core guidance

Checklist

* All table markup elements must have closing tags
* All tables should contain summary information
* Background colours within the table must not detract from the legibility of the contents
* Tables should be used sparingly
* Tabular information must always be clearly labelled and easy to follow
* All tabular information should be displayed in a standard way throughout the website
* Consider expressing table and cell widths in percentage terms

Summary

Tables are easy to construct in HTML, but they are also very easy to get wrong. A single mistake in the construction of a table can cause the entire page to fail to render in some web browsers although it may still render as intended in others.

Another aspect to consider is that what may look great in a graphical web browser may be completely unintelligible to a screen reader used by a section of the community.

Implementation

Although tables were initially added to the HTML standard to allow the formatting of regular tabular information, HTML authors quickly found that they could also be used to control the layout of HTML pages.

This ability to use tables to place images and textual information in specific parts of a page is widely employed on the majority of websites and has certainly made web presentation more aesthetically pleasing.

Any HTML mark up that is allowed in the body element can also be contained within in a table cell. This means that tables can be built within tables that are built within tables and so on. These ‘nested tables’ can add flexibility to a website design - for example, they can be used to build a single graphic from multiple images.

The downside of all this is that many users with visual disabilities and special purpose web browsers can have difficulty in separating the information from the layout.

Some special purpose browsers will only read web pages from left to right. The best way to illustrate this is to take a ruler, hold it to the screen displaying the page and draw it down the page one line at a time. If the page displays information in a number of columns it can be very confusing when read aloud.An HTML author needs to answer two questions when using tables:

* Is a table required to format this information?
* Will the consequence of the table be that certain users cannot easily access the information?