Great Webate - Tables Have No Place In Web Page Layout
— Paul Annesley, August 2007
As promised, I'm finally posting my notes from my second debate in the Melbourne Web Standards Group's first ever Great Webate.
The proposition was that Tables Still Have A Place In Web Page Layout
, and it was up to James Edwards and I to convince the crowd that such a statement just wasn't going to fly in the 21st century. Our unfortunate opponents were Kevin Yank and Andrew Krespanis, and I must say they made a brave albeit sometimes desperate attempt, given the proposition and the audience.
My argument was along these lines…
Once upon a time, when most sites boasted "Best viewed in Netscape 4" or "Powered by Frontpage", tables were great. Possibly even as good as framesets! With just a handful of table rows, plenty of data cells, and a sprinkling of spacer GIFs, you could place your spinning mailbox icon anywhere you liked!
But thankfully those days are gone, and with them, the need to use tables for web page layout. Jump forwards a few years, and we're in a whole new era.
"The use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web."
Semantics
HTML, in its various forms and versions, is quite rich with semantics. The correct use of heading levels and paragraphs alone can introduce valuable structure to a document. Correct use of tables—for tabular data, rather than layout—is also an invaluable tool. But when all of the content is contained in layers of nested tables, determining the document structure based on the markup alone becomes near impossible. When you have a rich set of tags for describing your content, why try to jam it all into tables?
Design—Locked In, Inflexible
"Forgetting semantics—because that's essentially what you're doing when you use tables for page layout—CSS based layout still has the massive benefit of separating content and presentation. A table will lock you into a design."
Page Size & Cacheability
Using tables for layout means very verbose markup that needs to be defined again and again on every page, rather than in a central (and cacheable) style sheet. Apart from making a site very expensive to maintain and redesign, this also means that every page load will be larger. Now, you might say that a few extra kilobytes per page doesn't matter, but this is important for mobile Internet devices. Coupled with the fact that they do not scale well on small screens, table based layouts are clearly inappropriate for mobile devices.
Markup as an API
More and more, the value of cleanly structured markup is becoming apparent. The standardization of various microformats allows web authors to add small pieces of metadata to their markup to introduce rich semantics which are easily discovered and interpreted by machines. This has led to the view of markup as an API. Personally, I don't fancy working with any API that lives in seven layers of nested tables.
User Style Sheets and User Scripts, Accessibility
Even if you don't plan on utilizing microformats in your content, you are giving your users much greater value by providing clean, semantic markup. Users with special needs will be able to easily apply user style sheets and scripts to make your website accessible.
User style sheets aside, the WCAG1 states Authors should use style sheets for layout and positioning.
The message is quite clear: Do not use tables for layout...