Friday, May 29, 2009

Table Layout vs. Div with CSS Layout

A few months ago, I tried to create my first website. Since my budget was very tight, I had to do everything myself, designing the web pages and writing the codes. Although I had some programming experience before, I had no knowledge in this web design area. Thanks to internet, I can learn everything free online.

After reading a few materials about HTML, I started to write my own for my first web page. There were two options for the layout: table based layout and Div based with CSS layout. At that time "Div" and "CSS" were totally strangers to me. On the contrary, "table" is a very familiar name. So I decided to use table layout for my first try. I was wrong.

I was a web newbie and an absolutely amateur "designer". So it is not hard to imagine how "unprofessional" my web pages looked like. Two months later, I tried to redesign my web pages. It was really a pain. Simply speaking, the modifications to the codes were tedious even if I just tried to insert a cell in the table. Fortunately I have gained some knowledge of Div and CSS in these two months and felt that it would be easier to re-write everything from scratch by using Div with CSS layout. I was right.

The Div with CSS layout is kind of like separating content and the presentation layout into two different parts. The advantage is that you can concentrate on the content first while writing the HTML codes and worry about the web page presentation design later in a separate CSS stylesheet. It is just a lot more flexible and easier to make changes to a stylesheet. Also since the stylesheet can be stored in the cache at the client side if it has visited the same page before, it is faster to download the web page and therefore a better user experience.

If you are a newbie in this web design area as I was a few months ago and have no knowledge in HTML at this moment, you might not understand what I am talking about. But don't make the same mistake as I did before. Use Div with CSS layout for your first website and you will not regret.