Learning Resources

Designing the page layout

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.