CSS Layout Or Table Layout

Developing a design with a css layout or a table layout are the two predominate ways to build a website. Those of you who know me know I lean heavily on the side of css layouts, but there are still many who believe that a table layout is the better option. Recently I came across an article written by one such person. There so many inaccuracies in that article that I want to discuss it here.

The article in question CSS And Tables: The Hype And The Trends by Deepak Sharma stuck a chord in me as backwards thinking and full of misleading opinions. Even though I had written not long ago on The Benefits Of CSS this article made me want to take up the argument again if only to clear up some misconceptions put forth there.

The History Of Tables And The Reality Of CSS

I agree that whoever first used a table to layout a website should be applauded. True the use of tables as a layout tool was a hack of html and I will admit that I have often unfairly used this fact as an argument against their use. While the language was never originally intended to be used this way many great technologies came about by putting something familiar to use in a different way and it is true that using tables expanded the design of websites and the popularity of the web. However today the situation is reversed in that tables confine the way a website can be designed and css is the expansive technology. Tables by their nature force everything into a box. CSS while also boxlike does let you break the boundaries of that box and move outside of it.

Mr. Sharma argues that using tables to layout a website is the pragmatic approach to web development and that it is difficult to implement css to layout a site. This couldn’t be further from the truth. It is just as quick and easy to build a site using css as it is with tables. For me it’s easier and quicker to use a css layout. His argument seems to stem from the use of WYSIWYG editors and I would say take the time to learn the code those editors are producing. If you do you’ll be hand coding pages faster than it takes to create a site with a WYSIWYG and then debug the code the WYSIWYG produces.

A CSS layout is far easier to maintain than a table layout. Changes generally need to be made to one external css file to update an entire site. The same can not be said for tables. Changes to the design of a table based layout will need to be made on every page of the site. If you don’t think you’ll ever change your site think again. What happens when you decide you want to add something new in your sidebar. With css the addition is trivial, with tables your new block of rss feeds is not likely to make it into your site. To change a table layout you will need to change the entire structure of the page and the site. If you don’t believe how easy it is to alter the entire look of your site with a css layout visit the css Zen Garden site and see how much can be done by editing a single file.

It may also be true that the majority of websites are still developed using tables, but that is not because tables are a better option. It was also true at one time that more people traveled by horse and buggy than by automobile and that most people saw no need to switch over. That didn’t make it the better option. I’m amazed that someone who works in a field that is all about technology could even use as an argument that since browsers are still willing to clean up the mess of poor code that there’s no compelling reason to write good code.

The reality is that far too many developers are unwilling to spend the time it takes to learn css. Sad since it’s not really any more difficult to learn then html. Much easier than most seem to think. Most of the people I see struggling simply haven’t taken the time to understand a few of basic concepts before jumping in. I’d recommend any book by Eric Meyer as a way to give you a good grounding.

The Ease Of CSS Layouts

CSS development does not present a higher barrier to entry than table based layouts. Most of the difficulties I see people having with css layouts has more to do with trying to make them act like tables and fit into pre-existing table based layouts than because the css concepts are difficult to assimilate. CSS layouts are different, not harder.

There are not a lot of ‘bugs’ as Mr. Sharma seems to think. Perhaps that was true in older browsers, but version 5 browsers have always been more than capable of handling a css layout and since those version 5 browsers are about 8 years old now why would you be developing for anything prior to them on most sites? Today’s browsers have very few ‘bugs’ and quite honestly it’s very easy to account for them. In developing I code to the standards and in the end add about 6 lines of code for Internet Explorer. I’d suggest the ‘bugs’ are more in the knowledge and skill of the developer than in the code or the browsers.

I have never had to write fairly complicated css to do something that would be trivial with tables. If anything the structure of a table is the fairly complicated code. CSS layouts are much cleaner in their structure and in their presentation. If you’re writing complicated css then you simply haven’t learned to use css It’s not any more involved than nesting tables inside of tables inside of tables. It doesn’t take a guru to layout a css site. It just takes someone who has made the attempt to understand how css positioning works. Most of the time the css used for an entire site will have less weight than the html of any given page. And only a small amount of the entire css file will be used in the layout of the site. Most will be for stying the various html elements.

I’ll admit I may still use a table to layout a form or two. There are uses for tables. I’m not arguing they should never be used, but only where appropriate. The overall layout of your site is not the appropriate place anymore. Mr. Sharma seems to think footers are difficult with css. Take a look at either my 2 Columns CSS Layout or 3 Columns CSS Layout posts to see how easy it is to have a footer in a css layout. There are even other ways to add a footer to a css layout that are just as easy.

CSS Layouts For Faster Loading

CSS sites will load faster in a browser. There is no question. Part of the concept of moving the css code to an external file is so that a browser only needs to grab that code once and then refer to it from it’s cache. Much faster than having to get all the code every time a new page is requested. And the only time those external files are complicated is when the person creating them isn’t fully understanding how to use css. That’s not the fault of the technology.

Browsers need to read all the code of a table before they can display it on a monitor. Once to understand the structure of the table and a second time to present the information in the table. While the browser is doing that visitors to your site see nothing. They get the whole table at once. A css layout can be presented as the browsers encounters the code. Your visitors can begin to scan your content while they are waiting for your images to load. And since you have such a short time to capture their attention why make them wait.

CSS, SEO And Accessibility

The jury is still out on the benefits of css when it comes to optimizing a site for search engines. It’s likely that the less code used in css will help in some way though again the jury is still deciding. Search engine spiders have become pretty good at reading poor code due to necessity. I do think leaner code means spiders and robots can get through your site faster and if I’m not mistaken the latest version of Googlebot uses the same engine as Firefox to navigate your code. If css and standards are easier on the browser it only stands to reason that it will be on the spider and robot too.

There are some that believe that being able to present the structure of your html with your keywords at the top of the page as css allows you to do will provide great seo benefits. I’m not convinced of this, but it’s possible that it will have some effect. Search engine optimization is about so many things taken in unison that it’s difficult to measure the effect of many of them individually and while it’s possible that css may provide some seo benefits it’s certainly not a panacea as Mr. Sharma says.

I’ll completely agree with Mr. Sharma about accessibility. A table based layout can be just as accessible as a css layout, though the css layout is probably still the better approach if you want to develop an accessible site. Mr. Sharma himself even points out that css layouts are the recommended approach. If the organizations that are determining what is and isn’t accessible are recommending css layouts wouldn’t it make more sense to use css if you want an accessible site?

If you read through Mr. Sharma’s article many of his arguments acknowledge that a css layout is often better than a table layout. He then typically backpedals by saying that they’re not really that much better so they don’t need to be used. Yes many developers still use tables to layout a site, mostly because they haven’t taken the time to learn how to use css properly and efficiently. The number of developers using css layouts though is growing all the time. Table layouts were a great hack in using html to present a web design. That was a good thing, a very good thing. Table layouts created a better way to present a web page and helped just as much as anything in the explosive popularity growth of the web. There now exists a better way to present a web design. CSS layouts are an improvement on table layouts much the same way that table layouts were an improvement on what came before.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.