You are here:

  1. Manual
  2. Development
  3. Tables
  4. Layout
  5. Guidelines

Tables: Guidelines for the use of tables for layout

There may be factors that prevent migration to a complete CSS layout.

  • The knowledge and experience of the web developers involved is inadequate
  • The site to be converted is too large, making conversion of the code too time-consuming and complex

Still, in order to comply with the Web Guidelines using CSS for layout is compulsory.

When modifying an existing website: use CSS for the presentation and layout of web pages and avoid using tables for layout.

Guideline R-pd.11.8

Misunderstandings about CSS for layout

There is some misapprehension as to what a CSS layout is. Such misapprehension seems to occur often when web developers switch from using tables for layout to CSS (Cascading Style Sheets).

A CSS layout is the term for a web page containing only structural, meaningful markup, the presentation of which is shaped by a linked CSS file.

The ideal situation - complete separation of structure and presentation - is not always feasible. Still, web developers should aim for this. Halfway solutions are possible, such as tables for layout, the column specifications of which - breadth, colours, fonts - are placed in a CSS file.

What a CSS layout is not

Web developers may sometimes refer to a DIV layout. All table markup in the source code has been replaced by div markup. And sometimes, virtually all markup is replaced by div elements. The div element is an element with a neutral meaning. However the markup of a document should describe the content as much as possible .

Using tables for layout

As a result of modern techniques and browser options the guideline below has become redundant.

When using tables for layout: do not use more than one table and use CSS as much as possible for the presentation of this table.

Guideline R-pd.11.9

Keep the table markup as simple as possible

  • Do not use more cells than you have to and do not divide these cells up unnecessarily.
  • Use simple columns and rows.
  • Leave detailed design to CSS, applied to the content of the cells. (headings, paragraphes, et cetera)

Do not apply any accessibility markup

In a table for layout do not use any accessibility markup for tables containing relational information. Only use td cells and refrain from using th, caption and summary elements or headers and scope attributes. The reason is that accessibility markup like that hinders visitors who should benefit from accessible tables.

When using tables for layout: do not apply any accessibility markup.

Guideline R-pd.11.10

Pay attention to the sequence of the content

The disadvantage of tables for layout is that the markup tends to determine the order in which the content should appear in the source code. An faulty content order in the source code can sometimes hamper search spiders and visitors who are blind. See also Correct order: long navigation after the main content.

Normally, the markup for a two-column table layout would look as follows:

Markup for a normal two-column table (HTML)

<table>
            <tr>
            <td>Main navigation</td>
            <td>Main content</td>
            </tr>
            </table>

By making smart use of the rowspan attribute, web developers can have a table cell that visually comes first in the layout (main navigation), appear after another cell in the source code (main content).

Markup for a two-column table, in which two cells are 'switched' (HTML)

<table>
            <tr>
            <td></td>
            <td rowspan="2">Main content</td>
            </tr>
            <tr>
            <td>Main navigation</td>
            </tr>
            </table>

Links and references


Web Guidelines version 1.3, November 2007.