CSS vs Table Positioning

If you are like most webmasters, you've spent a good deal of time using tables to assist in the layout of the page. After all, for some time, this has been the only sure-fire way of getting a page to look the way you want it to. The only sure fire way to get everything on the page exactly where it's supposed to be.

So, what's wrong with using tables for layout?

Well, first, let's look at it from the user's perspective..

Using tables creates a LOT of extra HTML on the page. This adds to the overall size of the page thus increasing the overall download time of the page. Remember that a large portion of your visitors are still on dial-up and if the page takes over 8 seconds to load, you can generally count on losing up to half of your visitors!

Along the same lines as above. One of the most common uses of tables is to place the entire page in a table to constrain the overall width of the page. This means that everything inside that table must load BEFORE the table will be displayed. This leaves your visitors staring at a blank page for 2,4,6 or even 8 seconds or more before it finally appears. Talk about a lot of lost visitors and sales!

Ok...now let's look at it from a search engine optimization perspective

Again, table layouts require a LOT of extra HTML. This means that the engines must wade through a huge amount of HTML to get to the actual content of the page. Generally speaking, the better the text to code ratio is on your page, the better it will rank. In other words, the more content and the less HTML the better. Have you ever noticed when looking through the SERPs that some of the simplest webpages tend to rank the best? This is because those pages have almost no HTML in them. It's almost completely text. The simpler the page, the better because the engines are able to understand it easier.

Yet another reason is an extension of the first. The more HTML code you have on a page, the more opportunity you have for errors to creep into your code that will keep the engines from properly indexing your page. The algorithms needed to properly extract the actual content from a webpage are pretty amazing and forgiving, but every now and then, a seemingly simple error will cause and engine to improperly index a page. The last thing you want is for a simple error to possibly be costing you thousands of dollars due to an engines inability to properly index the page.

Both of the above examples boil down to one simple thing...understanding. The whole concept of SEO is to optimize a page so that the engines can better understand what it is about. The simpler the page (meaning less HTML and more content), the easier it is for an engine to understand what it is about. To me, this above all else, is the ultimate reason to seriously consider using CSS for layout in place of tables.

Examples

So far, I have given you reasons why tables are bad for SEO, but I haven't given you any examples showing the difference between tables and CSS so now I'm going to. After all, a picture is worth a thousand words right?

To illustrate this, you’ll need to visit some examples I found at

http://www.hotdesign.com/seybold/index.html

I would recommend also reading the entire section at the above URL when you have a chance as it is short and worth the read.

Ok..let's look at a normal enough looking table layout by visiting the URL below:

http://www.hotdesign.com/seybold/15inteadofthis.html

Ok...that looks nice enough. Well formatted, simple, clean. Right??

Ok...let's look at that same table again with it's cells outlined. Also, be sure to view the source code for the below page after viewing it.

http://www.hotdesign.com/seybold/16nasty.html

Whoa. What the heck happened to our pretty...clean..table? It seems it wasn't quite as clean and crisp as it looked on the surface.

That's the problem with most table layouts. While they may look good on the surface, the code to produce them is quite often atrocious.

Now...let's look at a different table layout. This is still an actual table, but it is making use of CSS for the layout within the table.

http://www.hotdesign.com/seybold/17dothis.html

Wow...much better huh? It's still a table, but by using CSS to tell the browser how to render everything we shrunk the code down to almost nothing.

This is just one example, but there are many more. I recently took a site that was being launched by a client. It was a beautiful site, but it was done using tables for everything. In total 95% of the code on the homepage was markup! I had him get the site redesigned using CSS-P (css positioning). When it was redesigned, about 80% of the page was content with only 20% being markup.

Which do you think the engines would prefer??

It takes some time, but it's worth it. Just think back to when you first were learning how to code tables. It was confusing wasn't it? Now, it's probably second nature. CSS is the same way. Once you get the hang of it, you will wonder how you every got along with out it.

In addition to the reduction in on-page coding, how would you like to be able to change the look and feel of every page on your site by changing on file? You simply can't do that with normal table designs. With CSS, you can do sitewide changes by changing one stylesheet.

I am still in the process of going through my older sites and recoding them, but all of my new sites are CSS driven. It just makes things easier in all aspects. They may not be entirely styled by CSS, but the vast majority of  styling is done. Tables have their place and are still useful, but by using CSS to style the tables (not to mention styling the rest of your pages) you will find you have a MUCH better text to code ratio.

If you are interested in learning more about CSS, there are a number of books you can check out. Probably the most well respected is "Cascading Style Sheets: The Definitive Guide" by Eric Meyer.

You can also check out http://www.w3.org/TR/REC-CSS2/ if you prefer to get your information straight from the source. The above URL is for the official specs on CSS2.

Personally, I'd recommend the Eric Meyer book initially to help you develop your understanding for CSS then moving to the actual specs.


By John Buchanan