Five great reasons why
designing with tables is not a great idea.

When I first started designing for the web, I learned that the easiest way to lay out web pages was with tables. It really made sense back then. If you think about it, tables give you nice, structured columns that are really easy to work with in a visual web page layout program like Dreamweaver, FrontPage, or even PageMill (which was my first web page layout program).

That was a long time ago – before Wi-Fi, Amazon.com, and even before Google, if you can remember such a time. Most importantly, that was before CSS (Cascading Style Sheets) was widely adopted, and before the makers of web browsers agreed on how they would render the web pages that people visit. Those were the days when Tables (with a capital T) were the way of the Web.

But no longer. In the past several years something wonderful has happened. The old, non-standard browsers have gone away, and have been almost totally replaced by browsers that can render web pages fairly consistently across the board. Web designers have celebrated the emergence of what we now call Web Standards, which is a collection of programming languages, rules, and guides that all the current browsers have agreed to live by (more or less, in the case of Internet Explorer, which has its own somewhat frustrating interpretation of CSS rules).

This all means that web designers now have the tools and the responsibility to design web pages correctly. One of the most important aspects of correct design is the choice of page layout techniques. Because of the nature of the web, it’s not enough for a website to just look good – it must also be well-constructed. A poorly constructed website (even a good looking one) can cause a variety of problems for disabled users, is difficult to maintain, and detracts from the professional image of both the website and the designer. The most common way that web pages are constructed incorrectly is using tables to lay out the page. Lets look at a few reasons why tables are a poor choice for web page layout:

Tables break up the flow of information

Tables are rigid, and force the information in your page to be broken up in unnatural ways. This can make it difficult to extract the information from a page, and really causes problems for mobile users and users with disabilities – especially blind people using a screen reader. More importantly (depending on your priorities) it can cause Google and other search engines to incorrectly index your site. A web standards-based layout (using divs instead of tables and CSS to create the layout), on the other hand, allows you to structure the information so that it can have meaning apart from the visual design of the page. To understand how important this really is, try pulling up your web page on a mobile phone browser.

Tables emphasize design first, content next

Unless you have nothing to say, you probably want people to read what you have to say. If that’s the case, you don’t want to obscure your content behind design – even pretty design. A good web designer who works with web standards knows how to craft the visual design of a page around the page’s content, not the other way around.

Tables are for tabular data

Tables are intended for the display of charts, tabular lists, and other data that makes sense in a grid. Most web-based content is not tabular data, so it doesn’t make sense to use tables to lay out that type of web page content.

Tables are slower

Table-based layouts require a lot more HTML markup than do standards-based layouts. Extra markup means bigger file size and slower rendering times. Bigger file size means that your pages will take longer to download. If your users have slow internet connections, it will take them quite a bit longer to download a tables-based page than is really necessary. Once they’ve downloaded your web page, all that extra markup has to be rendered in the browser. More markup code simply takes longer to render on the screen. These days download time isn’t as much of an issue as it used to be, but users with slower computers may feel a noticable delay if your page is big.

Tables make it difficult to change the page layout

It’s much easier to change the layout of a page designed with web standards than one designed with tables. Because tables lock the page into a rigid layout, even the slightest change can really mess up the layout. You’ll end up using lots of empty cells, spacer images, hidden graphics, and other atrocious page layout no-nos just to get things to stay in their proper place. In a web standards-based design, on the other hand, an experienced designer can tweak the layout with just a few changes to the CSS. Want to swap the left and right columns? That takes just two lines of code (in most cases). Change the font styles throughout the site? Easy. Need to move it over a few pixels? No spacer.gifs required – just give it an absolute or relative position and tell it where to go. In practical terms, this means that an experienced designer can create and update the design of web pages much more quickly with web standards techniques than with tables. This can translate into cost savings, since the design will probably be easier to maintain in the future.

Why should you care?

Great question. How does good technique vs. bad technique affect you? There are lots of answers. Here’s a biggie: Your credibility is on the line. Having a poorly-constructed website reflects badly on you and your company, your church, or whoever your website represents. Remember, that’s the key – your website represents you. Increasingly, people look to your website for information about you, and many will make judgement calls based heavily on your website. Your website is going to become more and more important as more people begin to rely on the web as their first source of information. There’s no need to be afraid of this trend – embrace it! The web is one of the easiest, most effective, and least expensive ways to communicate with your customers, constituents, and members. You’ll never regret investing in a great website.

Further reading

• Godbit – Design vs. Development
• Godbit – Do We Really Care?
• Web Standards Project
• Designing with Web Standards, by Jeffry Zeldman