Page Layout with Tables

If you take a look at the code behind many older (and many new) web pages you will find that the elements of the page have been positioned on the screen using tables.

Sometimes multiple nested tables are used. The HTML 'table' element was always intended to be used for the display of tabular data (e.g. Last seasons team scores or student grades etc.) However, web designers found that the table element could be used to provide a 'grid' that would allow complex page layouts to be created. These layouts would remain the same when viewed from a range of browsers.

Problems with Table-Based Layout

We are most interested in creating web pages that are accessible to as many people as possible. It is therefore worthwhile having a look at what the W3C have to say about tables in their Web Content Accessibility Guidelines.

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]

5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]

5.5 Provide summaries for tables. [Priority 3]

10.3 Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns. [Priority 3]

Also, I would suggest taking note of one other guideline not explicitly related to tables:

3.3 Use style sheets to control layout and presentation. [Priority 2]

Reading those guidelines, you might start to get the idea that the friendly folks at WAI don't want you using tables for layout. To a certain extent that is true, and there are some very good reasons:

  • Tables, particularly nested tables, can be very hard to navigate using only keyboard controls.
  • Some people use browsers, such as Lynx, which linearise tables. When a table is used for layout, it is frequently the case that it is confusing or non-sensical when linearised(linearization means that each cell is presented one after the other in a vertical format, in the order they are defined.).
  • Screen Readers, mostly older ones, are very poor at dealing with information that is presented in a side by side format.
  • Finally, the W3C, in striving for ever greater levels of abstraction, doesn't want you using HTML for any presentation effects deviating from it's intended function. The intended function of the <table> tag(and it's related tags) is to represent tabular data. The layout of your web page is not tabular data.

Despite all of these completely valid points, it is still possible to use tables for page layout in an accessible and acceptable manner.

Table Based Layout - Example

Here is an example of a very basic, but accessible table-based page layout: Table Based Page Layout (Template 5)

Take a look at the source code and note the following:

  • The table uses 3 x rows and 4 columns
  • There are no nested tables
  • If viewed using a CSS compliant browser you will see the cell borders
  • The 'summary' attribute of the <table> tag has been used so as to comply with guideline 5.5 of the WCAG.
  • The class 'dashedborder' has been used to create the cell borders
  • The class'center' has been used to center the content of the cells
  • Multiple class names have been applied to single elements (i.e. class="dashedborder center")
  • The 'cellpadding' and 'cellspacing' attributes of the table tag have been set to '0'
  • The 'colspan' attribute of the main content cell has been set to span the 4 columns of the page
  • By setting the table width to be 100% the table will expand to fill the screen

Key Rules for Table Based Layout

  1. Use the 'summary' attribute of the table tag to indicate the layout structure
  2. Avoid side by side content
  3. Do not use nested tables

Zebra Striped Tables

So you are now fully aware of how tables should, ideally, be used only to present tabular data. We can make our table-presented data more user-friendly by making the rows more clearly apparent thus aiding readability. The following article (by David F.Miller) describes a method for styling a table to make each alternate row a different colour (stripey) in order to aid readability: Zebra Tables from A List Apart.

Here is a very basic striped table implemented using only a little CSS: CSS Stripes. This has simply been achieved by defining 2 CSS classes, one for even rows and one for odd. Since there are only 2 possible states for our rows we could get away with defining the styling for only one class and leaving the other as default, thus saving a little code.

And here is another stripey table implementation that users of iTunes may be familiar with: iTunes Stripey Table. This implementation uses a pinch of javascript which allows us to avoid allocating classes to each alternate row as the script will work out which rows are odd and which are even.