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

More in Div based layout vs Table based layout

cheers!!
Joginder Poswal

Learn CSS Positioning

The CSS positioning properties allows you to position an element, lets you control how and where a Web browser displays particular elements. This is one of the most confusing concepts in CSS. I can help you understand how positioning works. position:static and position:relative can be both display:block and display:inline, while position:absolute and position:fixed will always be displayed as block elements.

There are four basic ways to position an element. Static, relative, absolute, and fixed. static is the default value; for any other value you have to apply a CSS declaration.

Position:static-- the way it normally works.

Static positioning is the browser default, and it’s the most common form of positioning. An element with position: static always has the position the normal flow of the page gives it. (Ignores any top, bottom, left, or right declarations). Usually you wouldn't specify this unless you needed to override a positioning that had been earlier set.
position:static;

Position:absolute-- stick the content wherever.

Positioning an element absolutely, removes the element from the normal flow. Absolute positioning is exactly what it says, absolute. Absolute positioning is a good way to take content and place it somewhere that has no relationship to the content around it. The element's position is specified with the "left", "top", "right", and "bottom" properties.
More about CSS Positioning

cheers!!
Joginder Poswal

Are you a beginner in CSS? Some useful tips for you

1. Diffrence between Class and ID’s

Both are use for describe content and layout in a web page. Symbol for class selectors is (.) while id selectors is (#).

Class: We can use the same class on multiple elements and also multiple class on same element.

ID’s: Id’s are unique. It can only be used once in a page. The main advantages of ids are that they get priority in the cascade.

2. Use Reset.css
By default, browsers have different ways of rendering styles. Reset.CSS, basically reset the default values of web browsers and you won’t need to alter these differences for every element again.

3. Align Center any block element

You can align any block element in to center by using

margin:0 auto;

In any HTML document it will be given an automatic margin on both its left and right, ensuring that it’s always placed in the center of the screen. more...


Thanks
Joginder Poswal

Welcome to design2core

The reason why I have ever started this blog was to share good ideas with you, the accidental visitor. And hopefully to learn new things through your comments.


Thanks
Joginder Poswal