Web design techniques: Tables vs. CSS Boxes

A table of boxesBeginners to website design are faced with a big choice before laying out their first website: should I build my website using tables or should I go the CSS “box model” route? Many years ago when I was just a beginner to website design and was searching high and low for information on how to design websites, I often read posts by designers touting the benefits of either one web design technique or the other. Quite baffling to say the least, especially since I had absolutely no clue what these people were arguing about!

If you really are a beginner, have no idea what I’m talking about, or are contemplating which of the two to use, then this post is for you.

Table-based layout

We all know what a table looks like. No, not the kind that supports the weight of your computer, your empty pizza boxes, and your head when you fall asleep from watching one too many YouTube videos — the other kind. They look just like this:

A basic table

Unknown to many beginners to website design, these tables (which normally hold numerical data) can be used to hold together the elements of a website. Take a gander:

A table-based layout

To accomplish this, all you have to do is to start with a table that has the maximum number of rows and columns needed (usually the number of navigation elements you want) and then merge other sections to create headers, sidebars, and content.

The nice part about table-based layout is that they are very easy to create and very easy to understand for beginners to website design. Most WYSIWYG editors make it quite simple to create the table, merge cells, and then add the content. This is how I first began building websites in my early days.

The drawback of table-based layouts is that they produce bulky code, can be a major headache to debug, and if you decide to redesign your website, then you have to redo every single page.

CSS box model layout

The CSS box model is the new, hip, and very cool way to build websites. Instead of using the cells of a table (or tables) to hold the content of your website, you use “boxes” . These boxes are created using the HTML tags: <div> </div> Check out this typical website layout:

Typical layout

Hidden from your eyes are the <div>s that hold this layout together. The red squares in the following image show you where these “div boxes” are located:

CSS div boxes

The beauty of the CSS box model is that whenever you want to change the layout of your website all you have to do is change the single CSS file and some of the images (for the most part.) Case in point: Newbie Website Design is now in its fifth redesign. Each time all I had to do was to change the images in Photoshop and then the CSS file. Done!

The bad part of CSS is that there is a slight learning curve. And if you began your website design life using the table-based model, then you’ll have to go through a paradigm shift to wrap your mind around the unique CSS way. In addition, Microsoft’s Internet Explorer 6 and Internet Explorer 7 have buggy support for CSS. Thankfully, they finally added full CSS support in Internet Explorer 8. Other browsers such as Safari, FireFox, Opera, and others have had full CSS support for many, many years. (Why did it take Microsoft so long? :? )

Make your choice

As you ponder which website design technique you’ll use as a beginner to website design, please keep in mind that as you get better and better at your craft, you’ll most likely want to switch over to the CSS box model for its power and flexibility. If you just want a quick and easy website, then using a WYSIWYG visual editor with the table-based layout will get the job done to simple satisfaction.

Further reading:

Here are some posts that will held explain a little bit more of my recommended web design technique, the CSS box model:

CSS – Cascading Style Sheets
Boxes – The building blocks of websites

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



5 Responses:

  1. Deano Power

    Great article David. This is the clearest explanation I have read on tables vs css. I sit on the css side of the fence for mostly everthing, but yes there is a learning curve. Deano

  2. Eric

    I’ve been designing with tables for about a year. If CSS is that much better then I’d better start learning it.

    Thanks for the lesson. :)

  3. Joe

    I’ve been designing web sites since about 1993 and I’m still on the fence about totally discarding tables in my designs.

    Though using CSS has its advantages, when it comes to displaying large images, slicing them up and putting them in a table enables you to keep file sizes small for faster downloading. I suppose you could use the same slices in CSS boxes with absolute positioning, but I don’t see where that reduces the bulk in your code. Instead of table cells cluttering things up, you now have a plethora of tags cluttering things up.

    Tables have been used successfully for many years now, and though I will begin using all CSS to keep up with the modern standards, I guess it’s one of those things where I feel if it wasn’t broke, don’t fix it!

  4. Joe

    “…you now have a plethora of tags cluttering things up.”
    Should read: you now have a plethora of DIV tags cluttering things up.

  5. David R - Admin

    @Joe

    Thanks for your comment and the issues you have brought up concerning tables vs. CSS. You’ve inspired me to write a new post that goes more into detail.

    I used tables for years before I finally made the switch to CSS. I noticed immediately that my sites had far less mark up and were much easier to update since the whole layout was controlled through one CSS style sheet.

    It might seem like the tags used for tables would just be replaced by div tags, but you actually need far fewer div tags to accomplish the same feat. In addition, these div tags have much more power when it comes to altering the appearance of the site.

    Until I write the post concerning this, take a look at the source code for my design studio website:

    http://www.davidradtke.com/

    It is extremely clean, fast loading, and completely controlled by an external CSS file making it a snap to update or even completely redesign. Speaking of which, the site is in its 6th redesign and I’ve only had to change the images in Photoshop and the CSS file. Each web page was never even touched.

    That site only has 6 pages. But even if it had 60+ pages (which some of my clients have) the redesign would only occur in Photoshop and in the CSS file.

    I’m not bad-mouthing tables. I still use them from time to time. It’s just that I’ve found CSS to be easier and more powerful for what I need to accomplish.

    Thanks again!
    -David


Share your thoughts below: