Bye Bye Tables

December 23rd, 2005

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.