Why tableless layout

• Writing by Rajveer
• On June 21st, 2008 at 7:35 am

Being a web professional I feel happy to see a big hype of CSS 3 and discussions about very advanced web techniques. 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.

I am an expert creating robust layouts using Tables and I use CSS for controlling additional styles like font and BG colors. Why I should not use Tables for layout?

Go back to the history

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.

Honey you’re killing the web!

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.

CSS Should Be Used For Layouts

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 -

• More beautiful and accessible
• More flexible and faster
• More functional and supportive

Welcome to the world of “beauty”

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.

• Layouts are much cleaner in their structure and presentation.
• Provides a greater support weather you work on a fixed width or liquid design layout.
• CSS supports to present alternate version of visual layout for the same page for a different user or browsing device.
• Develop complicated layouts without damaging the structure of the document.

Fasten your seat belts!

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.

Accessibility is the top priority

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 supports aural style sheets, which specify how a document will sound when rendered as speech.
• CSS provides more precise control over the display of alternative content than HTML alone.
• CSS allows users to override author styles while browsing if they find any difficulty browsing thru author defined fonts, styles etc.

Be more flexible and efficient

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.

Write it once and use anywhere for everyone

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

An example of CSS layout

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.

An example of CSS layout – HTML code

<div class="container">
      <div class="header">HEADER</div>
      <div class="container">
             <div class="leftbar">Left</div>
             <div class="content">Conent…</div>
             <div class="rightbar">Right</div>
       </div>
       <div class="footer">Footer</div>
</div>

An example of CSS layout – CSS code

body  {
	color:#000;
	font-family:"Arial",Helvetica,sans-serif;
	font-size:76%;
	line-height:1.5;
	padding:0;
	}
.container {
	text-align:left;
	width:700px;
	}
.header {
	background:#FBFF32;
	}
.leftbar {
	float:left;
	width:150px;
	background:#4456DA;
	}
.rightbar {
	float:right;
	width:150px;
	background:#44D1DA;
	}
.content {
	float:left;
	width:400px;
	}
.footer {
	clear:both;
	background: #BABABA;
	}

Conclusion

Tables should only be used in extreme cases where there is no other viable alternative. With taking care of accessibility and proper testing for disabled users.

• You can leave a response, or trackback from your own site.
• Category (X)HTML, CSS
• Add this post to Del.icio.us - Digg - Technorati

• Previous post: Give your feedback and contribute to CSS typography
• Next post: A possible way out to control the fuel inflation

Possibly Related Writings

• A template for CSS Zen Garden Submission
• CSS frameworks for designers
• Give your feedback and contribute to CSS typography
• Great online CSS reference with live demos
• Explore DOM with Firebug

12 Responses

1. Daksha June 24th, 2008 at 7:57 pm

   Hey Rajveer! It’s a nice presentation to band the heads of sleeping web designers. The cow questioner was answered pretty well in the end.

2. Gopal Juneja June 25th, 2008 at 1:57 am

   It’s really a hot topic you have chosen and Your writing is phenomenal, keep it up.

3. Rajveer June 29th, 2008 at 8:42 pm

   Thanks Gopal and Daksha

4. Why tableless layouts are essential? - Graphic Design Forum and Web Design Forum July 22nd, 2008 at 2:03 am

   [...] questioning as why we should pure CSS to build beautiful web pages. Check out the article I wrote here to cover the same topic in a precise manner. You can also download the the PPS file for your [...]

5. gowri September 23rd, 2008 at 12:29 pm

   thanks, it is very very useful for me.through this idea i created one page using div class.

6. manoj October 14th, 2008 at 11:31 am

   Hi Rajeev,

   This is very nice as clean example, Thanx a lot for that.

   I have one question. How do you put a border on left and right sides of the layout and also how to tile that backgroud image(border) throught the left and right pannels.

   Cheers,

   Manoj

7. Rajveer October 14th, 2008 at 1:49 pm

   Dear Manoj, check your e-mail for the answer

8. Manoj October 15th, 2008 at 3:25 am

   Hi Rajveer,

   Thanks for the reply! Sorry I misspelled your name.

   I have checked my email, but I couldn’t find a feedback from you.

   You kind help is very much appreciated!

   Cheers,
   Manoj

9. Rajveer October 17th, 2008 at 9:54 am

   Sent again!

10. Does usability really matter to usabilitymatters.org October 21st, 2008 at 9:55 pm

    [...] of the worst example of HTML markup, forget about validating the pages. Using tableless layout doesn’t mean can do whatever you want. I would strongly recommend these guys to learn some [...]

11. J.D. November 13th, 2008 at 1:17 am

    Try a cross browser complex layout - with some floats and clears thrown in. You will soon realize it is easier said than done. Nevertheless - using table is very messy but I argue that CSS support esp. considering IE’s evil fallacies causes grief even with slightly complex layout.

12. Rajveer November 13th, 2008 at 9:22 am

    @ J.D. - I agree that we have to deal with lot of cross browser issues while working on CSS based layouts, but I believe using tables is even more worst in all the cases.

Leave a Reply

Name *

Mail *

Website

Notify me of followup comments via e-mail

If this is your first comment on Inspired Buddy then your comment will be held for moderation. So please do not repost if your comment does not appear immediately. I will remove any inappropriate or irrelevant comments.