Beginners guide: Tables vs. CSS Boxes
Beginners 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.
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:
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:
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:
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:
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.