Why tableless layout?

But on the other end I see more than 50% of websites are a proof as a complete negligence to welcome the new world of web. Refer to one of a very common mistake, I see even now many newly developed websites are table based. Main reason to follow this bad practice could be because of lack of awareness or may be some of our friends are still not convinced to take an initiative.

From last couple of days I have been working on a power point presentation in subject to encourage people to develop CSS based layouts. I have tried to make it a simple presentation containing 16 slides which ends with the conclusion that tables should never be used for layouts. If you are still using tables then I would strongly recommend you give it a read. I have uploaded the presentation on my slideshare account. If you don’t have enough time then read it from below.

When HTML was created, Tables were not meant to produce the visual style of a web page. Tables were intended to display the tabular data only. Indeed there was not a proper method in place to cater the needs of advanced layouts. So our former web designer fellows discovered that they could use tables to develop robust layouts.

Border=”0″ made it possible for designers to implement the layouts using tables.

W3C says, using Tables for layouts is like wearing dress shoes for jogging – both work, but they’re the wrong tools for the job.

There is a huge list of disadvantages using Tables if you start comparing with CSS, below are some key points to express the whole story. If you use Tables then -

Have a look to the source code and see your valuable content is mixing too badly with presentational data.

Your content won’t load unless this excessive presentational data is loaded separately for each page the visitors browse.

It’s very tough to maintain the visual consistency throughout the site.

Redesigning the site is too much laborious and expensive.

Site is less accessible for disable people and for user who browse using other devices like PDA.

The Gurus of CSS/HTML have their own valid reasons as to why CSS layouts are better, but these common reasons are presented again and again to build a better web. Using CSS your web layout will be -

CSS allows separating the content from its presentational data. It also provides a greater control over layouts than tables. It was never so easy with Tables to keep the position of visual elements completely consistent across the site. By changing a single CSS file one can completely change the aspect of a site to make it perfectly suitable for screen or printing.

Once single CSS file which can control the whole site, is called from the cache for any page a visitor browses your site. There is no question that it is much faster than having to get all the presentational data loaded every time again and again.

Your web pages weigh much less as your complete presentational data is derived from a CSS file. That also helps search engines to read only your valuable content not the presentational data.

CSS supports to present alternate version of visual layout for the same page for a different user or browsing device.

CSS benefits accessibility above all by separating the document structure from presentation. It also allows users to view documents with their own preferred fonts, colors, etc. CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document.

CSS provides very good control over font size, color, and style. Some of us still use images to present as special text using a particular font type which may not be available on the client’s machine. Which is not accessible to particular software such as screen readers and search engines can also not read that.

CSS can render the alternative fonts if a preferred font is not available on user machine. Also the powerful WebFonts of CSS allows the users much greater control of client-side font information. If a font is not available it can be downloaded from the web, all according to author specification.

Check some more accessibility features -

CSS based design offers a degree of flexibility nearly impossible in restrictive Table based layouts for both, the site developer and the reader. Developers can quickly and easily redesign the entire visual elements of a site by modifying one CSS file. They can also present multiple designs for the reader. Separating content from the detailed structure of table-based layouts provides more added benefits in terms of compatibility and portability for future.

CSS pages are supported by most browsers used by the visitors these days.

CSS pages are more useful because of their universality and adaptability.

CSS allows extreme flexibility in positioning and styling the visual elements of a layout.

Be more flexible and efficient – One page, many designs

One of the benefits of CSS is the ability to transform the way a page looks without altering the HTML code. On www.hp.com you will see a different color theme on HP website after every page refresh.

Present yourself proudly to search engines

CSS encourages a web page to optimize a site perfectly for search engines. Being also done well with accessibility, minimizing the markups and using HTML tags properly will certainly help improve the search engine ranking.

As mentioned earlier, one single CSS file is enough to control a whole website. In edition to that, the same CSS file can be used as a template to derive the similar results for any other site. Any required visual changes can be achieved by changing the same CSS style properties. Checkout the web addresses below to see the power of CSS -

http://www.csszengarden.com

http://www.cssvault.com – Online CSS web gallery

http://www.cssbeauty.com – Online CSS web gallery

Below is a simple example of a common three column web layout. In next two pages you will find the CSS and HTML code to create the same layout structure.

Note: CSS class ‘container’ is assigned to control the whole layout in terms of its position, width, background color/image etc.