For a better understanding of why we want to use div tags combined with CSS for the layout our websites, let’s take a look at the following two methods.

Note: You can download both layouts used here: Click Here

The first layout is shown here:

Table Layout

This shows our website created in tables. No CSS is used and all font sizes and colors are managed in deprecated <font> tags. This method IS easier to learn for beginners because most programs like Dreamweaver are still not as up to date as they need to be. Users are able to draw tables to create a layout for their website without knowing any code.

Compare this to the layout created using the method of divs and CSS here:

Div Layout

View the source code for both, what do we notice in the div/CSS method?

• Cleaner code
  If we need to modify the menu we can immediately jump to the div with the “menu” class. I can easily find all the data inside the “footer” div without fumbling through <table>, <tr>, and <td> tags.
• Less code
  This also means faster page loading. In this example there is only one page and not too much content but imagine we had 10-20 pages. In the example using tables each page needs to contain the page width, font sizes, font colors, alignments for each table, margin, and padding. Each time a user goes to a new page they must load all this data. Using this method the average load time is on average 2 to 4 times longer. When we use an external style sheet for ALL design data we have the user load one style sheet file that is used throughout the website.
• SEO and Accessibility
  Because all of the content is on the page in a clear readable method, software used by search engines as well as screen readers for the blind can run through our websites with ease. Users can easily swap our style sheet with one generated to have larger font sizes or more readable colors if needed.
• Easier Changes
  If the client tells us they want to change all the main text from Arial to Verdana we only need to change one line in the CSS file. However if the styles are contained within the html pages like the table based example we need to do this several times per page for every single page on the website. Even worse what if they would like the entire layout to change? In the table based method this would require a complete overhaul of every page, however if your html structure is set up correctly you can easily swap style sheets to give your website a completely different look. While on the subject, take a look at csszengarden.com. Users can submit a completely new design (viewable on the right hand column of the website) simply by sending images and a CSS file.