June 6, 2008

Table vs CSS

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.

1 comment:

Unknown said...

good job man, i really liked it.