Table based design and Table less design

TABLE-Based Layouts

• ü  Tables have been used in designing layouts for a very long time.
• ü  Traditionally, layouts were built using HTML with tables to layout the page structure and content.
• ü  Tables existed in HTML for one reason: To display tabular data.

The problem with using tables

• v  File sizes of your pages unnecessarily large
• v  This makes redesigns of existing sites and content extremely developer intensive
• v  Extremely hard to maintain Visual Consistency
• v  Much less accessible

Tableless  / CSS-based Layouts

• ·         CSS or Cascading Style Sheets have been used for positioning and layouts
• ·         The browsers that the vast majority of viewers are using today have good CSS support
• ·         Coding CSS is easy

Why CSS Tableless Designs Are Better

• ·         Widely supported by modern browsers
• ·         Allows extreme flexibility in positioning
• ·         Redesigns are easier
• ·         Increases usability by encouraging liquid design
• ·         Keeps the HTML/text ratio at a low level thus decreasing load time
• ·         Allows the display of main content first while the graphics load afterwards
• ·         Increasing accessibility through CSS

Example:        display:inline

• Ø  CSS tableless design is a great method for developing modern layouts and offers many valuable advantages over traditional table based design

Difference Between

Tableless (CSS)	Table based (all HTML tags)
1. CSS tableless design allows web designers the possibility to make more complex layouts.	Web designers are confined to creating layouts that can be rigid, inflexible, and based on grids.
2. By using CSS style sheets it is extremely easy to maintain visual consistency throughout on website.	It is easy to lose this consistency because each web page’s style, layout, and design are frequently hard-coded individually into every page.
3. Updating a CSS tableless website is easier and less time consuming than compared to table based designs.	Updating is very Difficult and More time consuming
4. Redesigning a website using CSS tableless design is faster and less expensive than redesigning a website using table based design. This is because CSS tableless designs have separate files for content and visual data including web page structure	whereas table based designs mix layout information with content in the same file.
5. Ex: CSS tableless design eliminates this problem by using DIVs instead of tables which can be easily resized, positioned anywhere on a page, or even dynamically manipulated through the use of scripting languages.	Ex: Table web page designs rely heavily on the use of spacer .gifs, a transparent image used to control blank space within a table based web page. Having to create a series of custom sized transparent images to organize web page layout creates messy code and a rigid page structure that can’t be easily changed.
6. CSS tableless web design is a reduction in web page file size which equates to web pages loading faster.	a table based web page frequently takes twice as long to load.