Home | All Questions | alt.html FAQ >

Why should I use CSS layouts over tables?

Very simple, tables are for structuring tabular data, not for presenting visual layout. Cascading stylesheets are superior precisely for the reason that they don't (by design) affect the accessibility of the content and functionality on a page. HTML-as-visual-layouting language is deprecated, and browser support can be expected to get worse (which is better). CSS is intended, among other things, to solve the problem of general page layout that tables have been misused for in the past.

Besides, what's the alternative to CSS? Using table-layouted HTML3.2 pages will never guarantee everybody gets a nice rendering out of it. Quite the opposite -- it might result in a meaningless rendering in many situations.

With CSS positioning each element is a container which can be styled and positioned correctly. Because CSS is separate from the content in being defined in an external stylesheet, it is possible to switch off the presentation in user-agents where the presentation layer inhibits access to the information and content. The content then gracefully degrades to a completely usable and accessible browser default styling. The same cannot be said of tables.

CSS is optional, by design. The site may look plain on browsers which don't implement it, but at least (if the site is designed right) it will still work, in the sense of giving the reader full access to the information content. Since access to information always a higher priority than presenting it in a predefined style, this allows a larger audience to visit.

The browsers which don't implement CSS at all (e.g Lynx) will come to no harm and need no special attention, beyond normal good practices of web design. This is a significant cost saving in both development and testing cycles.

Tables are designed for presenting tabular data, layouts which use tables may make sense to the surfer using a visual browser, but often the underlying structure of the HTML, the document flow, does not linearise well. Thus when the page is viewed on devices that aren't visual browsers running on a PC (e.g. PDA's, mobile phones, voice browsers etc) the content does not make sense.

What makes tables a bad choice is that when used, it is impossible to differentiate reliably which table actually structures tabular data and which is being misused for layout. This effectively prohibits the use of tables in a semantic sense. Since the web is heading toward a human and computer based information environment, tables based layout dole out a large amount of damage for no advantage. There is also a Web Content Accessibility (WCA) component to this. Screen readers and specialized Web page rendering devices used by People with Disabilities often do not render layout table information satisfactorily.

Benefits of CSS Layouts

"If some fancy design idea doesn't work well in practice due to bugs or bad browser support, then do something simpler; do not resort to bad coding (i.e. tables), nor to invalid code. Do something simpler, and wait for better times. After all, the content is what's important."

Web Designers get better results with stylesheets by learning them as a design technique in their own right, rather than blundering around with the idea that they're meant as a replacement for mis-used tables and/or invisible gifs and/or HTML3.2 etc.

Stylesheets are better for proposing presentation, because in principle they do no harm when their suggestions are inappropriate. If the stylesheet causes a problem in a particular situation, then the user can intervene: that's part of the design concept for CSS.

Stylesheets are, at least temporarily, worse because of the dreadful implementations that are out there, necessitating extra care in design - but it's getting better all the time, and one can shield obsolete implementations from the more risky parts of the CSS by various techniques.

The problem with table layout is that you're stuck with it even in situations where it makes no sense (think accessibility, in all its senses). Where, on the other hand, tables are used to express an actual relationship between the cell contents ("tabular data", to put it crudely) then they are doing their proper job in HTML.

Recommended Resources

Discussion

Related Questions