Introduction to Page Layout using DIV element

We normally use either TABLE or DIV tag to create page layout like specifying control's position, splitting the page etc. But, most of the developers prefer using TABLE instead of DIV tag. In this article, I am going to discuss about the advantages of using DIV instead of TABLE tag with an example. I am using VS 2008 for this sample. Around 70 - 80% sites are using TABLE element for creating page layouts. 
But, DIV element gives following benefits, when compared to TABLE:

1. Fewer Markups: By using DIV tag, markup code needed to create page layout is less than using TABLE tag.
2. Low Bandwidth Loading: By using DIV tag, markup will be less which in turn loads page quickly on low bandwidth networks.
3. Low Browser Burden: Since, Markup will be less by using DIV tag. The load and time needed by the browser for page display will be low.
4. Easy to Change Layout: By using DIV tag, we can easily modify our page layout. Since, we can manage the layout using DIVs and design using style sheets separately and easily.
5. Multiple Resolutions: By using DIV tag, we can make sure our page works at different screen resolutions and widths.
6. Absolute Positioning: By using DIV tag, we can position the controls absolutely on a page.
7. High Priority: DIV tags will be loaded first on a page, when compared to a table tag. Because of this, contents present in the DIV tag will be displayed first before the complete page loads.

Let's see the above benefits in a sample. Open your VS 2008 and create a new Website and name it as DIVLayoutSample. 
Create a layout to your default page using TABLE tag with a header, footer, left, right and content in the center of the page as shown below in between form tag: 
 
Run the application, the output will be like this: 
 
Now, we will implement the same layout using DIV tags. Remove above markup and add this DIV markup as shown below: 
 
Firstly, lot of markup got reduced. Secondly, it's easy to add/modify existing page layout. Page will also get loaded very fast, because of fewer markups and less load on browser for loading the page. It works very well on low bandwidth networks. 
We can still reduce the code by replacing the position, top and left attributes with float attribute as shown below: 
 
float attribute makes a DIV to float left/right direction. clear attribute clears previously specified float attributes. By using stylesheets, we can split HTML markup (DIV tag) and design (separate stylesheet) into different files. So, by using DIV tag we can reduce markup, load page faster and works well at different resolutions and network bandwidths. So, start using DIV elements for your page layouts and experience the benefits of it.  I am ending up the things here. I hope this article will be helpful for all.

Login to add your contents and source code to this article

Article Extensions

Contents added by Zuhair Darwish on Jul 02, 2009

Download File: div_html_page.zip

Header

Left Content

Main Content

Right Content

Footer

Div Layout vs. Table Layout - Web Designing

Most of the web designers directly chose the table based layout for their websites. Reason behind this is it's very easier to design a webpage rather than going for div based layout or the web designers are not that much familiar with CSS. But there are lots of drawbacks in it.

Page Size will Increase

Table has lot of inner tags like TR, TD, TH and each inner tag will have separate styles in it. Need to write styles for each and every tag. Surely it will increase the page size and because of that downloading speed and the network bandwidth will get increased.

Whereas in Div layout, it's just the single tag Div, all the styles can be declared in the CSS files, which reduce the web page size.

Page rendering will be slow

Page rendering will be slower in table based layout, because page content won't be displayed until the end tag of table reached. But in Div based layout, rendering will be faster, since it won't wait for the end tag for the content display.

Difficult to maintain

When we want to change the design in an existing page, it's very difficult in table based layout, because code impact will be more. Whereas in div based layout, it's very easy to change the design, because everything will be handled in the CSS.

No Consistency in pages

In Div layout, there will be a consistency in all the pages, but in table layout if we miss any parameter like table border, padding or anything, entire content will be changed and will not be consistent in all the pages.

Separating Content and Visual Presentation

In div layout we are separating the HTML content and the visual presentation, so it's make the search spider of the web page to act in quick manner. Whereas in table layout, extra HTML pushes the important content further down to the page which increase the time to render the page.

Search Engine Tools

Div layout helps the search engine tools to search faster when compared with table layouts, since its need to traverse several HTML tags.

Div Layout - Less Code

<div id="Header">...</div> 
<div id="Menu">...</div> 
<div id="Content">...</div> 
<div id="LeftPane">...</div> 
<div id="footer">...</div>

Table Layout - More Code

<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td colspan="3" height="120px">....</td> 
</tr> 
<tr> 
<td class="Menu" valign="top">...</td> 
<td class="Content" valign="top">...</td> 
<td class="LeftPane" valign="top">...</td> 
</tr> 
<tr> 
<td colspan="3">...</td> 
</tr> 
</table>

Excess code slows down development and raises maintenance costs. More lines of code means, larger size which means longer download times.

So go for Div layouts instead of table layout. Use table layout only to display the tabular information and not in all the areas.