The myth of Tableless design


Posted in: html | Save to del.icio.us | Twit This! 1 Dec 2009

HTML tables have received a lot of unnecessary bad press over the years. The problem lies in the fact that tables were never intended as a layout tool. So during the initial years of web design when people started using tables to format their web pages – adding 1 pixel spacers, padding cells to align content, nesting tables n levels deep and more, it was time something had to be done. CSS was the answer. CSS rescued developers from the awful practice of using table for content layouts. It was all very fine until word started going around that tables were an absolute no no in any html design. Even if you had to display some kind of tabular data, you had to do it using CSS. Creating a tableless design had become the hallmark of an expert web designer. That was the last straw, and the myth persisted.

the myth of tableless design

Cartoon created with help of pixton.com

Why HTML tables are important

Table are important, necessary (and good) for presenting multivariable data, they were designed with that sole purpose in mind. If you are presenting a school time-table, flight schedules, stock information or any other tabular data then tables are a good fit for that. Using a combination of DIVS, LI, UL for displaying data is semantically incorrect and will also leave them inaccessible to search engines or screen readers. By inaccessible I mean that they will not be able to interpret the information correctly. If your tabular data is stored using tables then you can easily parse the data programmatically, which becomes difficult if the same data is structured using DIVS, LI and other assortments.

So in conclusion HTML tables are bad as a tool for content layout, leave the layout work for CSS; but good and essential for presenting tabular, multivariate data.




Share this post

Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Digg
Share on Technorati
Share on Reddit
Feeds RSS Subscribe to site Feed

Other related posts

  • No Related Post


1 Response

1

Andrew Cobby

December 4th, 2009 at 2:35 am

That’s a cool cartoon :P

You make a very valid point, but I do use tables for tabular data.

The main downside of tables is the inconsistent usage with JavaScript. If you want to update a TBODY with the response of an AJAX request, you need to build each TD individually, then add that to a TR then append to your TBODY element. Writing to the innerHTML property is against the W3C spec.

Comment Form

Use the html <code> tag to insert small source code snippets

For longer code examples use http://pastie.org/.

Get latest updates by E-mail

About this blog

This site is a digital habitat of Sameer, a freelance web developer working from Pune.More

Recent Comments

  • Arjan: Fiddler is a debugging tool for IE (not Microsoft's Fiddler) [...]
  • Susan Martin: while creating a test for site, command icons on IDE greyed out and do not respond when selected. I [...]
  • Saar: Thanks for this example. helped me a lot. I have 1 problem, I am translating chunks of code, but I [...]
  • sameer: You can add extra GET variables in the options array as below: $pager_options = array( 'mode [...]
  • Martin: How can you carry over your own variables into the URL? I am using a form to POST a couple of var [...]
  • nancy: thanks very much ! first tools [...]
  • Krishna | PHP Programmer: Thanks for sharing !! [...]
  • Really Useful Tutorials You Should Have Read in February 2010 Ajax Help W3C Tag: [...] Reading Google Analytics data from PHP By Sameer Borate, February 1st, 2010 Site: Code Diesel [...]

  • Users Online

    • 19 Users Online
    • 1 Member, 16 Guests, 2 Bots