Layout Tables and CSS for Positioning

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.

Benefits 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 Everyone

  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.

More Information

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

Markup

width (CSS2.1)

clear (CSS2.1)

float (CSS2.1)

table[th] (HTML4)

table[summary] (HTML4)

table (HTML4)

Related Accessibility Requirements

Section 508

Illinois Information Technology Accessibility Standards

Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 1.0