Layout Tables Overview

Overview

The layout of columns and sections in a web page should be done using CSS instead of table markup. The use of CSS layout techniques makes it more likely that the reading order of information will make sense to screen reader users. When developers use table markup to lay out web pages, it is easy for that related information to become disconnected in the reading order of the web page. CSS has the additional benefit of being a technology designed to help web developers more efficiently manage the look and feel of their website and make it easier for web pages to be rendered on a wider range of technologies, including cell phones, printers and Braille displays. If table markup is used to lay out a web page, it should be kept to a minimum and left as simple as possible (for example, use tables that have only one row or column). Avoid nesting tables, which make it more difficult to maintain the reading order of the web page. Make sure related content is the same table cell; for example, the header element describing the relationship for a list containing links should be in the same table cell as the list of links.

Benefit to People with Disabilities

  1. Web pages linearize well for people using screen readers, making page content more understandable and readable.
  2. People with low vision can disable or provide alternative stylesheets to restyle text to meet their own visual capabilities.

Benefits to All Users

  1. Web pages are generally much smaller in size, improving download speed, the number one usability issue for most users.
  2. Pages are easier to view on a wider range of technologies, including cell phones and PDA devices.

Benefits to Developers

  1. Content is easier to create and maintain since table markup code does not need to be organized and maintained on each web page. The lack of table markup for layout also makes web pages much easier to read and edit.
  2. The same web page can be delivered to both desktop and portable web browsing technologies with little or no modification and can be adjusted to a particular browsing environment with the use of stylesheets.

Related Resources

  1. CSS Zen Garden
  2. CSS Max Designs
  3. WESTCIV: CSS Tutorial Resources

HTML Markup Details

table element
The table element and associated tr and td elements should be avoided for layout columns and other positioning. The use of tables and nesting of tables increases the likelihood that content will not linearize well for screen reader users. The th, thead and tbody elements should never be used in table markup used for layout, as these elements are reserved for tabular data tables and their use leads screen reader users to believe that layout tables may be tabular data tables.
summary attribute
summary elements should not be defined for the table element. Web developers occasionally define the summary attribute with the value "layout" or some other description of the layout; however, this confuses screen reader users who must now listen to irrelavent layout information. The summary attribute should be reserved for use with tabular data tables.
float property
The CSS float property allows block level content to "float" to the left or to the right of other content in the document, creating column effects that people often use tables for.
clear property
The CSS clear property stops the floating of block level elements to the left or right, essentially acting as a "new line" function.
width property
The CSS width property is used to determine the width of a column in a table-less design for layout. In general, percentage widths should be used to reflow support content to fit the width of the current window.
margin, border and padding properties
The CSS margin, border and padding properties can be used to set spacing between block level elements and create borders without using images or spacer text. This makes pages easier to maintain and create.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
17.1 When using tables for layout, ensure that reading order is logical.
17.2 When using style sheets for layout, ensure that reading order is logical.
17.3 Avoid horizontal scrolling.
Section 508
1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.
W3C Web Content Accessibility Guidelines 2.0
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence
W3C Web Content Accessibility Guidelines 1.0
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).
5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting.