Div based layout vs Table based layout

When we start developing a static website we have two options for layouting. One is CSS based layout and another is table based. Lots of beginners have questions that which one is best. In initial phase of my career in many interviews, the interviewer always asked me this question, “What is the difference between CSS and table based layout? Give me some good reasons why we use CSS div based layout?”
There are so many reasons why CSS based design is superior to table based layout.

What is CSS

CSS stand for Cascading Style Sheets used to describe the presentation of a document written in a markup language and was introduced by the World Wide Web Consortium (W3C). in late 1996.

Cascading Style Sheets allow the designers to separate the content from the design of a web page and make the page more efficient, more consistence, more clean code, more accessible and easier to maintain and update.

Reasons why use CSS based layout:

Faster page loading :

when a user visit your website and if a page takes too long to load, user will simply often leave it. No one likes waiting for a web page to load. In table based layout website there are lots of code like, table, tr, th, td, height. Weight, bg color, align, etc. meaning that your browser has more to read before rendering the page. In CSS based layouts much less HTML coding than table based layout.
CSS based layout become 2-3 times faster in loading as compare to table based layout. When we use CSS for layout (external CSS file) browser will cache all the formatting and layouting for your page. This can result in much faster page lading time.

Accessibility and usability :

CSS based website is more accessible and usable than table based layout for user.

  1. Universal cross browser support using cross browser declaration. Designer can create different css file for different browser.
  2. Multimedia support: designers can specify CSS file specifically for mobile devices, printing, PDA’s, Projectors, and computer screen, as a result website become accessible at all multimedia applications.

Visual Consistence across pages:

In table based layout it is easy to lose their consistency because each web page layout, design, and style are hard coding individual in every page. And if you want to change in your website across all pages you ‘ll have to change the code on every individual page. But as compare in CSS based layout the design elements can be defined in a single place( external css file) and will automatically be applied to those elements on the website. No need to change on individual pages one by one.

CSS is better for Search engine optimization (SEO):

As we already discussed that in CSS based layout there are less amount of code by which page loads faster, search engine spiders can easily crawl through the websites. Due to Less junk markup and Structural organization( by using h1, h2, h3 tags) makes it easier for Search Engine Spiders to decipher between code and content and determined what content is more important than others. As compare in table based layout

Bandwidth saving so low hosting cost:

When we host our website on server some hosting providers charge their customers that are based on the amount of bandwidth that is used each month. Bandwidth is the amount of traffic that is permitted to occur between your website and the rest of the Internet. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings. CSS layouts are less bulky than table-based layouts. The main reason for this decrease in file size is becouse of the using external CSS file, called up once when the homepage loads up and then cached (stored) on to the user’s computer .

Website redesign in future is more efficient and less expensive:

Redesigning a website using CSS Div based layout is faster and less expensive than redesigning a website using table based layout. Because CSS based website design layout define in some externals CSS files. So if you want to change you need to change only in these files (rather than change on every page of the website). This makes for faster an less expensive design changes in th future.

Printer- media friendly style sheets:

In CSS based layout designer can define different style sheets for different media types and also can define print style sheet for print. But in table based this is not possible, the user will be force to click on print friendly version to see how this page look like when he print it. In CSS based design we can define which part of the page print when anyone give print command. We can define it in an external file.

Conclusion
When you convert your website from table based to CSS based layout it become more accessible, more usable, low hosting costs,easy to maintain and clean, simplified, structured markup.

cheers!!
Joginder Poswal

Tags: ,

This entry was posted on Wednesday, May 13th, 2009 at 7:37 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Div based layout vs Table based layout”

  1. Web Design and Development Research Lab » Blog Archive » Interview Questions For Front End Web Developer Says:

    […] When we start developing a static website we have two options for layouts.  One is CSS based layout and another is table based. more about table based layout….. […]

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player