Let me preface this post by saying that there is a bit of controversy amongst web designers regarding the topic of this article, so it is based purely on my personal experience, fact-finding research, and my biased but humble opinion.

Unquestionably though, I have not seen credible evidence to the contrary, and CSS for your website design layout (or styling)—NOT tables—is the best way to go for the reasons listed in my Top 10.

When I first learned web design years ago, I used tables for layout, positioning of images, etc. Most designers did. But, with the exciting advent of Cascading Style Sheets (CSS) that all changed—and very much for the better!

If you are a designer that uses tables, an aspiring designer, or even someone that had someone else design your site, hopefully this article will give you a little insight into why NOT to use tables for layout. You won’t learn CSS here, but you will learn a little something as to why you should use CSS instead of tables.

I won’t get into the fun design (style) elements that CSS can be used for, such as setting your font family, font sizes, font styling, borders, positioning images (what fun you can have with positioning!) and most anything else on your pages, styling blockquotes, styling lists, and numerous other uses. Hmmm…maybe CSS in more depth should be in a future article. Sorry, I digress… Because I am so passionate about it, this article is only about why, in my opinion, you should not use tables for layout.

1. Firstly, if you use tables for layout, you are writing invalid X/HTML. Why should you care if your code is invalid (has errors)? Tables are only valid in X/HTML when displaying tabular data. This is the number one reason to use CSS for layout. Using proper CSS to position and layout your pages is the only way to get designs that are valid.

   Another concern is that a lot of pre-made templates use deprecated table code when putting their templates together. I won’t mention any names here on the companies that do this, but this is referring to “site builders” in particular. Sure, it is convenient to use these types of services, but you have to be mindful of the code behind the scenes (maybe check before you commit to this type of website creation).

   If “code” sounds like a bunch of mumbo-jumbo to you, you can see what is meant by that if you use ‘View Source’ in your web browser and look at all the strange looking “code” you see. At this point, just suffice it to say that using valid “mumbo-jumbo” i.e. code, is important.

2. Tables will be completely blank in some web browsers. This is usually caused by tables that are created incorrectly, either by inadvertently missing tags (code to identify the different parts of a document so that a web browser will know how to display it), or not closing tags. And even if you have all the tags, if you don’t have them lined up exactly right, complex layouts can become very difficult to edit and maintain.

3. CSS positioning is easy to maintain. I try to always use external style sheets (CSS in its own separate .css file), so a couple changes and it’s good to go. In many cases, it’s just a matter of a <div> element (<div> would be one of those “mumbo-jumbo” things) surrounding the different sections of your text, and voila! you’re done.

4. Besides being pretty inflexible, tables are often slower to load and can dramatically change how your layout looks in different browsers. If you use specified widths for your tables, you end up with a very rigid layout that won’t look good on monitors that are sized differently from your own.

5. With CSS layouts it is actually a lot easier to create layouts that are flexible. Take this site for example: CSS Zen Garden. All layout for all the designs is done with CSS. Isn’t this main site, and the other site examples by other CSS gurus in this repository, much more appealing than a template-looking, inflexible table layout? AND—it is all valid X/HTML.

6. Search engines love valid code, so by not using tables it helps with Search Engine Optimization (SEO). One of the reasons for this is the difference between search engine spiders and browsers. Spiders “crawl” the web indexing web pages and their content. In other words, search engine spiders are looking at the same code your web browser is and analyzing it in a very similar way.

   The difference in how spiders and browsers function, however, is important:

   There is a very real pressure on actual web browser developers to ensure that their browsers display pages correctly to the user. This often includes browsers “being more lenient” with errors in the source code. Some improper coding in X/HTML might not affect your web page’s display in your favorite browser, but when it comes to search engine spiders, it can be an entirely different story. That is not to say that small errors in your X/HTML code will spell certain death for your search engine rankings, and they certainly won’t normally make your page invisible to spiders.

   Code errors can, however, mess up the vastly important process of a spider analyzing your page for all relevant content – or make some of that content invisible. Since so much of SEO is paying close attention to every little detail of your site and its content, why leave the possibility open for causing problems for search engines when they try to index your pages?

   Validation might mean some big headaches when you set out to fix every last error on your pages, but the benefits of valid code are clear – and running your pages through a validation service like that of the W3C can do a lot in the way of educating you about the mistakes you may be making.

7. The most common way to create fancy layouts with tables is to “nest” tables (one table inside another, inside another, inside another, etc.). But, nested tables load even more slowly. The more tables that are nested, the longer it will take for the Web browser to render the Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them. And Netscape has problems whereas the page won’t display at all.

   There’s not much to say about CSS layouts. It is easier once you get the hang of it, and pages load faster; if only because there is less code.

8. The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the X/HTML is the left-hand navigation bar. Related to SEO, search engines categorize pages based upon the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation.

9. Tables also aren’t as accessible, which is a concern for your impaired visitors to your sites. Just like search engines, most screen readers read Web pages in the order that they are displayed in the X/HTML. If a screen reader were to read the same page described above, it is possible that the visitor or potential customer/client would hit the back button before the reader had even read through all the navigation.

   With CSS, you can define a section as belonging on the left side of the page, but place it last in the X/HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.

10. If you’ve ever tried to print a table-based web page, you know that tables don’t always print well. Sometimes you end up with pages that look okay, but the whole right side is missing. Other pages will print sections on various sheets.

    With CSS you can actually create a separate style sheet just for printing.

As this article comes to a close, I just want to say that although it seemed daunting at first, since learning CSS I haven’t looked back. I do not use tables for design—unless it’s for tabular data, which is (and was) the intended use for tables. I also use external style sheets (CSS), with occasional inline CSS. This totally simplifies maintaining sites—a quick change in your CSS file, and you’re good to go!

If your site is based on tables for layout and design, I’d be happy to give you a quote to upgrade your site from a table-based design to CSS. Just give me a shout out and contact me.