Seven Reasons to go Table Free

Posted by Neil Crosby on January 29, 2006 10:14 PM

Top seven reasons to avoid tables for layout:

  1. If you’re using tables for layout then you’re mixing presentation with content, so your bandwidth usage is higher than need be, as for every page your visitors view, they have to download the same presentational data again and again.
  2. Redesigns are a lot harder than they need to be. Since tables can only be laid out on screen one way, if you want to change the layout of a table site, you have to change your tables in every single one of your pages. Not a nice job. With a full CSS site, all you need do is change that one CSS file.
  3. Tables really don’t help accessibility for viewers with disablities. Although your layout may look logical displayed on screen, the order in which it will be read by, say, screen reading software, may be very different. Many countries now have their own laws stating that websites must be accessible to all.
  4. Likewise, people visiting your site using PDAs, mobile phones, and the like do not have the screen space that your big flashy table layout demands. A well written CSS site will generally scale far better to smaller and larger screens than a comparable table layout will.
  5. Tables are just plain complicated to look at in HTML. Before you even get to any content inside them you’re at three levels of indentation.
  6. Tables can hurt search engine ratings. If you’re using a “classic” left hand navigation table, your navigation will be placed before your content in your HTML file. Because Search Engines generally place more importance on the things nearer the beginning of a page, the chances are your content will be largely ignored.
  7. Tables can take longer to display correctly than CSS. If you use Internet Explorer, you’ll have seen this many times when loading tabled sites. While everything on the page is downloading, the IE will keep rerendering, bouncing the contents of the page back and forth until the download is complete and it knows where to place everything..

So, how should you write pages? With proper semantic markup, that’s how! Your markup shouldn’t be describing how to lay your content out on the page, just what the different parts of your document are. So paragraphs will be inside <p> tags, lists are in <ul> and <ol> tags, etc. For bits that your want to move around the page for your actual layout, use <div> tags. Sure, there’s a learning curve at first, but isn’t everything a learning experience? You’ll be saving yourself time and money in the long run.

Of course, if you’re here, you probably already know that using tables for layout is bad. Even better, you’re almost certainly designing without tables. So why not proclaim your goodness to the world? Join the table free campaign!

If you enjoyed reading this and would like other people to read it as well, please add it to del.icio.us, digg or furl.

If you really enjoyed what you just read, why not buy yourself something from Amazon? You get something nice for yourself, and I get a little bit of commission to pay for servers and the like. Everyone's a winner!

comments (10) | write a comment | permalink | View blog reactions

Comments

  1. by John Beisley on March 23, 2006 05:29 PM

    This page has some nice bits on why table-free is good, and how to go about doing it.

  2. by JiggaDigga on April 7, 2006 06:28 AM

    Great reading, keep up the great posts. Peace, JiggaDigga

  3. by Sander on April 24, 2006 11:16 AM

    Best method is combining tables with

  4. by sander on April 24, 2006 11:17 AM

    lol that spose to be with iframes

  5. by Benjamin on June 4, 2006 05:45 AM

    While this seems really nice and cute, CSS it’s a verry complicated lenguage my reasons:

    1. It’s not like any other markup lenguage, looks like C but it’s not.
    2. Not fully cross browser compatible.
    3. It takes even more CPU to render this, the browser has to parse 2 files.
    4. JavaScript access to CSS DOM its hard to do, again not fully cross browser compatible.
    5. WYSIVIEW editors can’t handle CSS just a few parameters. so it’s likle you have to edit it you’r self.
    6. Having lots of style definitions can be a mess with all thar class stuff
    7. It takes more band with remember the browser has to donwload a separate file and wait for the content of the web page to be parsed and rendered to see the page has it was ment to be!

  6. by eduo on June 5, 2006 05:31 PM

    Benjamin: I think you’re confusing things and may lead to confusion in others.

    • It doesn’need to be like other markup languages. CSS’s structure is probably one of the simplest out there, so bogging it down with an XML-like structure, for example, would really throw the learning curve out of the field. C is not really a markup language either, I believe
    • What is? HTML is not fully cross-browser compatible. The further you go into the past the more compatibility you’ll find, but this is not due to CSS or JS but due to the time standards have been and the reluctante of browser programmers to adopt correct standards (either without ‘extending’ them or at all)
    • 2 files do not imply more complexity, CPU-wise. A heavy table-laden page can be represented by a much less complex CSS file, which would result in less CPU used.
    • Which is not really something relevant to the discussion, as it’s not related to the usage of tables or CSS but to using Javascript to change parts of the page. It’s as hard to dynamically change a table section than it is to change a CSS section. Some would argue it’s messier, too.
    • WYSIWYG editors shouldn’t be used for intensive websites anyway. They’re OK for basic websites and for prototyping but if you’re giving an opinion on the advantages of CSS vs. tables then most likely you’re not using a WYSIWYG editor for your pages (as they have far more issues than this, trivial one)
    • It’s not really more complicated than having undreds of style attributes for cells, paragraphs, alignments, colors, sizes, etc. Actually let me add precisely this to the above argument about bandwidth and CPU.
    • CSS files are usually cached. Styles are defined only once instead of several times. The page doesn’t depend on CSS for anything other than the style, but the content is untouched. Etc.

  7. by Mit on July 15, 2006 03:25 PM

    Try validate your page with html or xhtml you give six error. your page is seen the same as table pages on my Amaya(w3c browser)

  8. by Neil Crosby [TypeKey Profile Page] on July 15, 2006 03:36 PM

    Good lord! I forgot to encode three ampersands in a url! The sky truly is falling…

  9. by Joel A. Burdick on October 12, 2006 11:50 PM

    Nice site, -a lot of useful information that I certainly need and can use. I like the examples and comparisons that you took the time to explain and present for comparison. -Good work! -Joel

  10. by Justin on October 24, 2006 04:35 AM

    Thanks. You convinced me and I’ve made the switch.

other relevant pages

about wwm

workingwith.me.uk is a resource for web developers created by Neil Crosby, a web developer who lives and works in London, England. More about the site.

Neil Crosby now blogs at The Code Train and also runs NeilCrosby.com, The Ten Word Review and Everything is Rubbish.