This information is being maintained for archive/historical purposes only.
It will not be updated.
Please see http://archive.cabinet-office.gov.uk for details.

 

Main navigation

In section navigation

6.3 HTML tables

Publishing date: May 2002

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

6.3.1 Checklist and summary: Core guidance

Checklist

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.

6.3.2 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:

Important: WYSIWYG (‘What you see is what you get’) HTML editors are not as useful at creating tables as those that show the HTML markup. Good background knowledge of HTML is essential to avoid common markup mistakes.

Many elements go into the construction of HTML tables. The following sections cover the basic elements and attributes that should always be included to construct a table.

6.3.2.1 Table element

This is the element that establishes the table within an HTML document. As soon as a browser reads this markup it knows that everything included after it that is contained within cells is to be constructed in a tabular format. <table>:
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

6.3.2.2 Table widths in percentages

If you wish to ensure that an entire table displays on the screen regardless of screen size, use percentages for specifying the table and cell widths rather than fixed widths. The former allows the browser to size the table cells in proportion to the dimensions of the user’s screen. A fixed value that is larger than the displayable area will cause a page to scroll from left to right, which can be difficult to negotiate.

The following example set up a table whose width is 80% of the width of the browser window. Within the table there are two columns, each of whose width is 50% of the width of the table.

<table width=”80%”>
<tr><td width=”50%”>cell 1</td><td width=”50%”>cell 2</td></tr>
<tr><td width=”50%”>cell 3</td><td width=”50%”>cell 4</td></tr>
</table>

If the user re-sizes the width of their window, the browser will re-render the table to take account of the changed window width.

Care should be taken with this technique when tables contain body text. Text set in wide measures (column widths) can be very inconvenient to read.

6.3.2.3 Border attribute

Any value added to this attribute will affect the dimensions of the border surrounding the tabular information. This value can be any pixel value from zero upwards. A value of zero will mean that the table border will not be displayed. The following example has a one-pixel border and illustrates various alignments of text within the table cells.

<table border="1">
<tr>
<td width="200">This is cell one</td>
<td width="200" align="right">This is cell two</td></tr>
<tr>
<td valign="bottom" align="center" height="100">Cell 3</td>
<td align="center">And this<br>is cell 4</td></tr>
</table>

Representation of the table described above

6.3.2.4 Cellpadding attribute

The value given to this attribute will control the space around data within cells the table. A larger value will increase the space between the data and the table grid lines.

<table border=”1” cellpadding=”5”>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

Representation of the table described above

6.3.2.5 Cellspacing attribute

The value given to this attribute will control the space between cells in the table. A larger value will increase the thickness of the table grid lines.

<table border=”0” cellpadding=”0” cellspacing=”5”>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

Representation of the table described above

6.3.2.6 Alignment attributes

Alignment attributes can be specified for a number of table-related elements. The entire table can be left, center (note the American spelling of centre, which is used in HTML markup) or right aligned on an HTML page with the ‘align’ attribute. This same attribute can be used to position data within individual cells. The ‘valign’ attribute (for vertical alignment) can be specified for td elements and takes a value of top, middle or bottom. The align and valign attributes may also be specified on a table row element to set a default alignment for all the cells in the row.
<table border=”0”width=”90%” align=”center”>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

6.3.2.7 Summary attribute

This attribute allows the author to give a descriptive value to a table. The summary attribute gives a user with a visual impairment an indication of the content of the table, which will either be spoken or presented by a Braille device.
<table border=”0” width=”90%” summary=”this is an example table”>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

6.3.2.8 Caption attribute

This attribute and value will be shown on screen. It allows an author to attach a descriptive title to a table. This should not replicate the summary information already included, but should complement it. <table border=”0” bgcolor=”#ff0000”>
<caption><em>A test table</em></caption>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

6.3.2.9 Table headers for accessibility

The following example shows how to use the table header element to enable screen-reader software to convey the structure of tables. The headers attribute of the table data item elements is used to indicate beneath which header each data item falls.
<table border="0" summary="This table charts the number of cups of coffee consumed by each e-Communicator, the type of coffee (decaffeinated or regular), and whether taken with sugar."> <caption>Cups of coffee consumed by each e-Communicator</caption> <tr>
<th id="header1">Name</th>
<th id="header2">Cups</th>
<th id="header3" abbr="Type">Type of Coffee</th>
<th id="header4">Sugar?</th>
</tr>
<tr>
<td headers="header1">G. Ryman</td>
<td headers="header2">10</td>
<td headers="header3">Espresso</td>
<td headers="header4">No</td>
</tr>
<tr>
<td headers="header1">T. Levy</td>
<td headers="header2">5</td>
<td headers="header3">Decaf</td>
<td headers="header4">Yes</td>
</tr>
</table>

A screen reader would typically render this table as follows: Caption: Cups of coffee consumed by each e-Communicator

Summary: This table charts the number of cups of coffee consumed by each e-Communicator, the type of coffee (decaf or regular), and whether taken with sugar.

Name: G. Ryman, Cups: 10, Type: Espresso, Sugar: No

Name: T. Levy, Cups: 5, Type: Decaf, Sugar: Yes

Complex tables can have an alternative page that presents the data in a linear fashion or as a file. Although adopted by the W3C WAI, the is not widely supported by current browsers. A solution may to use a [D] (description) link. The D-link is a letter ‘D’ added to the document next to the table and links to a detailed description.

To understand how a screen reader will read a table, run a straight edge down the page and read your table line-by-line.

6.3.2.10 Bgcolor attribute

This attribute can be added to a table or a cell to apply a background colour. Wherever it is placed, an author must always ensure that there is sufficient contrast between the contents of the cells and the background colours used in order to avoid user difficulty in reading the data. The example below would colour the entire table background red. <table border=”0” bgcolor=”#ff0000”>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>

6.3.2.11 Colspan attribute

This attribute can be added to a cell. Its value will control how many columns individual cell’s contents will span across horizontally. <table border=”0”>
<tr><td colspan=”2”>This data spans two table cells</td></tr>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr<
</table>

6.3.2.12 Rowspan attribute

This attribute can be added to a cell. Its value will decide how many rows the individual cell’s contents will span across vertically. <table border=”0”>
<tr><td rowspan=”2”>This data spans two table rows</td>
<td> cell 2</td></tr>
<tr><td rowspan=""3"">cell 4</td></tr>
</table>

Important: Netscape Navigator tends to be far less forgiving in its rendering of HTML. If HTML markup for a table contains syntax errors, there is a good chance the table will not display correctly. The same table viewed in Microsoft Internet Explorer 4 will often render apparently without a problem.

6.3.3 Examples of tables

The following example illustrates the range of HTML elements and attributes that may be used in the construction of tables. <table border="1" width="40%" cellpadding="1" cellspacing="1" align="center" summary="An example of tables using all basic elements">
<caption><em>A test table</em></caption>
<tr><th rowspan="2"></th><th colspan="2" align="center">Average</th>
<th rowspan="2">Red<br> eyes</th></tr>
<tr><th>height</th><th>weight</th></tr<
<tr><th>Males</th<<td>1.9</td><td>0.003</td><td>40%</td></tr>
<tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td>
</tr>
</table>

Every tag that has been opened has been closed correctly. It should also be noted that the text within the caption has been formatted with the tag rather than the . This ensures that correct emphasis is given to the caption when read by a voice browser.

This table will render as shown:

Representation of the table described above

Further, more detailed instructions on using and implementing HTML tables within a website can be found in the W3C HTML4.01 specification.

In section navigation