Tables Or Css Choosing A Layout

Dave Winer walked into a long-simmering debate when he recently asked what's so important about tableless layout. The kinds of passionate responses he received have been regularly heard throughout the web design community—including places like evolt.org's own lists.

Not ready for prime time?

One of the common arguments against CSS-based design is that reality hasn't caught up with the technology's benefits.

Although no popular web browsers fully support CSS2 yet, many of the latest versions (Netscape, IE5+, Opera, and OmniWeb among others) have excellent support for CSS1 and strong support for CSS2. Even better, the public seems to be adopting these new browsers relatively quickly.

A year ago, more than one-quarter of the surfing population used browsers with poor CSS support (including IE 4). Now less than 12 percent do—putting support of CSS-based design at the same level as JavaScript and Java.

Three reasons why

Advocates of tableless design have their own pet reasons as to why style sheets are better (“it's faster”, “there's better design control”, “it's the right thing to do”), but three common reasons are presented again and again:

1. Semantics: The HTML table was conceived as a means to display tabular data. Using tables for layout was mentioned in HTML 3.2, but only to acknowledge existing use—the concept didn't appear in the original RFC. In future recommendations, the W3C said style sheets, not tables, should be used for layout. Using tables for layouts is like wearing dress shoes jogging—both work, but they're the wrong tools for the job.
2. Accessibility: Screen readers and text browsers struggle to read table-based layouts. In fact, the W3C, in its Web Content Accessibility Guidelines, explicitly says “[d]o not use tables for layout...” A tableless-layout designed using CSS can present the most appropriate, and usable design for each user agent—be it a cell phone, a screen reader, a TV-based browser, or a browser running on a desktop computer.
3. Efficiency: For both the site developer and the reader, a CSS-based design offers a degree of flexibility nearly impossible in restrictive table-based layouts. Not only can developers quickly and easily redesign an entire site by modifying one file, they can also present alternate designs for the reader. Separating content from the detailed structure table-based layouts provide, has the added benefit of future compatibility and portability.

Think about the future

Given the direction of current browser development and of the W3C itself, CSS-based design looks to become the de facto method of web design. Before switching to a tableless design, though, designers should consider the site's audience and goals (as they do whenever using anything other than pure HTML):

• Do most of the audience's browsers have good CSS support? If 30 percent of the audience uses Netscape 4.x, for example, switching may not be the best idea right now.
• Can CSS be implemented efficiently through all or part of the site? If all of the site cannot be changed immediately, small sections could benefit from CSS.
• Can there be two or more versions of the site? Some sites offer the previous tabled layout to older browsers, and the CSS version to the newer ones.
• Will the redesign by unveiled now, in six-months, or a year? The longer the planned roll-out, the more likely the audience will better support a CSS-based design.
• Is/will the site be available in multiple formats and media? If so, the benefits of CSS far outweigh the negatives.

Even if a tableless design may not be suitable for one site today, it will be for a growing number of others now and in the future.