digital media access group
...excellent accessibility research and consultancy
This is a archived version of the DMAG website, but the information remains for reference. Please visit the new website for updated information.
CSS vs Tables for Layout
By Scott Milne, published 5th April 2004.
As discussed in previous articles on this site ("Why Using CSS Improves Accessibility", "CSS-related Accessibility Problems") Cascading Style Sheets remain a double-edged sword. When used sensibly CSS can improve many aspects of a web site, including: separation of content and presentation, easier maintenance, improved accessibility and reduced download times. However, lack of browser support - and incompatibility between different browsers - remains a serious issue for any web designer considering using CSS for layout.
CSS for Sure
Generally speaking, where font and paragraph formatting is concerned, support is strong enough across browsers that CSS should be used in place of inline styles or proprietary solutions such as the 'font' element. Then, if a browser doesn't support style sheets, or if the user has them switched off, content will still make sense to the user as long as it has been marked up according to its structure with the appropriate HTML elements.
When it comes to layout, web designers have traditionally taken advantage of HTML Tables to place content and navigation into a particular arrangement of rows and columns. Eventually, the demand for more flexibility over presentational control of Web content led to CSS being introduced as a standard for controlling style and layout. For a long time however, everyone except extreme CSS purists could see that until browser support for CSS was sufficiently high, using it over traditional solutions such as HTML Tables would in fact reduce accessibility and usability for most users, given the unexpected and often catastrophic effect of CSS-controlled layout on older, but still popular, 'Version 4' browsers.
In Favour of CSS
As browser support and cross browser compatibility for CSS layout has grown, more and more experts in the web design community have been advocating a shift away from using Tables. The argument for adopting CSS for layout control is stronger than ever before and will grow stronger still as more web users upgrade to CSS supporting browsers.
These are some of the core advantages of using CSS rather than HTML Tables for layout:
- Layout tables require the positioning code (table elements) to be bundled in with the content itself. This can be difficult to maintain, especially for complex table arrangements. Using CSS, the content can be provided in one file, while the information describing how this should be presented is stored separately, making it easier to maintain.
- Repurposing web content which is arranged with Tables requires the designer to extract the content from the existing Table arrangement and create a new table arrangement to place it into, which can be time-consuming and increases the likelihood of errors creeping in. With CSS, the same content file can be presented in a variety of ways simply by writing a number of layout designs in separate files.
- With Tables, the order in which content must be arranged in the HTML code to achieve a particular visual layout is different from the order in which a human being would choose to read it. Hence, when the Table is 'linearised', it often becomes so illogical that the page is effectively inaccessible. With CSS, content can be prepared in a logical linear fashion from the start and subsequently repurposed for visual layout - and potentially an alternative layout optimised for non-visual output - as required.
Despite these obvious advantages, there remain some within the web design community who caution against using CSS for layout. While nearly all would agree that using CSS for font and paragraph formatting is to be encouraged, ongoing concerns about backwards compatibility of CSS have led many to resist using it for page layout. Even those who use CSS for layout need to become familiar with workarounds such as the 'Box Model Hack' in order to come up with layouts that won't break horribly in specific browsers. An excellent description of these techniques is provided by Jeffrey Zeldman in his book Designing with Web Standards (2003).
The advantages of using CSS to control layout mean that designers are increasingly moving away from using HTML Tables. Despite ongoing concerns for some, the use of CSS supporting browsers is now more widespread than ever before, and we can expect this trend to continue. Using CSS to control layout is encouraged by most advocates of accessible and usable design as a means of producing content which can be efficiently and effectively repurposed for different user agent technologies.
- "The Layout is dead, Long Live the Layout", Maxine Sherrin. http://www.wpdfd.com/editorial/wpd0701.htm
- "CSS Positioning", BrainJar.com. http://www.brainjar.com/css/positioning/
- A List Apart - http://www.alistapart.com
- Eric Meyer on CSS - http://www.ericmeyeroncss.com
- Zeldman, J (2003), Designing with Web Standards. New Riders.