Posted by Neil Crosby on January 29, 2006 10:14 PM
Top seven reasons to avoid tables for layout:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 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!