[harish]

Tables have been used in designing web sites for a very long time. Yet, even today, with the multitude of browsers available, many compatibility and accessibility issues rise to the surface. All these issues must be addressed in order to ensure a web site is completely functional to all users including those using alternate browsers.

CSS or Cascading Style Sheets have been used until now for text formatting but recently, developers have started using it for positioning and layouts. CSS layouts are still difficult and time-consuming to implement but their advantages are certainly worth the trouble.


I want to know your opinion on this. what you think which is better table based layout or css based layout.

[Nico]

We've just had this.

http://www.programmingtalk.com/showthread.php?t=52161


Personally, I use CSS/divs in most cases, but only because I like it. I don't really see these "advantages" you're talking about.

[harish]

I am not agree with you css has many advantage. some advantage are:

* CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
* Pages load faster
Less code means faster download times.
* Easy maintenance
To change the style of an element, you only have to make an edit in one place.
* Superior styles to HTML
CSS has a much wider array of attributes than HTML.

[Nico]

None of your points above has anything to do with your original topic, though.

We're talking about tables layout versus CSS layouts, and not CSS versus HTML in general (<font> tags etc).

Also, your two posts contradict themselves in one point.

Originally Posted by 1st post

CSS layouts are still difficult and time-consuming to implement

Originally Posted by 2nd post

CSS saves time

[dgreenhouse]

Actually, I'd have to say tables are faster in many cases when it comes to layout, but I
prefer CSS from a purist and accessibility standpoint. Plus, as you mentioned, it makes
for faster downloads due to leaner pages

Additionally CSS allows for a clearer separation of markup, application and presentation logic -
although I'm reverting back to some ugly stuff on a project at the moment. :-)

I use tables where it makes sense (i.e. tabular data). If you've ever created multiple
embedded divs just to simulate a table, you know what I mean. In cases like that, divs
are actually more work than they're worth - plus it's just plain stupid (IMO).

There's a run back to tables in some quarters due to the headaches with cross-browser
CSS (I'm not one of individuals running back to tables.).

JavaScript frameworks have pretty much solved the x-browser issues; at least for
current gen browsers. The best thing Microsoft did to help with x-browser CSS, was
creating the IE conditionals - even though I don't know if that was Microsoft's intention.
Since IE is still the number one browser on the web, you have to deal with it and the
conditionals make life a lot easier.

I build for FireFox - test in Safari, IE, Chrome and now again in Opera.

Opera has been causing me headaches recently with JavaScript frameworks, but the CSS seems solid.

(I'll be testing in others soon for thoroughness.)

In summation, CSS although Tables are many times easier to get it out the door.

[End User]

Originally Posted by harish

I am not agree with you css has many advantage. some advantage are:

* CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
* Pages load faster
Less code means faster download times.
* Easy maintenance
To change the style of an element, you only have to make an edit in one place.
* Superior styles to HTML
CSS has a much wider array of attributes than HTML.

As Nico said, none of your points above has anything to do with the original topic. Plus, tables can be styled with CSS just like any other element.

You also said, "Superior styles to HTML
CSS has a much wider array of attributes than HTML."

As you may know (or not), You can use CSS to apply styles to your HTML. I just don't see any of your points as being compelling, or even accurate.

When I create a site, I do it with whatever works, and speed is a big factor. Compatibility is also key, and different browsers handle CSS differently. Not so with tables- every browser will render a table identically. You make a div 300px wide, and different browsers will display it slightly differently (like IE's "box model" does). But a 300px wide table will be 300px wide in every browser, period.

[fleep]

Originally Posted by End User

You make a div 300px wide, and different browsers will display it slightly differently (like IE's "box model" does). But a 300px wide table will be 300px wide in every browser, period.

erm.. not completely true. A 300px div will render as 300px in every browser
It will only render differently (in ie) if you add padding to the div, and there is a really simple solution to that (without using hacks), but thats for another post unless someone asks.

Originally Posted by End User

As you may know (or not), You can use CSS to apply styles to your HTML.

Thats what CSS is for - applying styles to html, no?

[dgreenhouse]

Originally Posted by fleep

erm.. not completely true. A 300px div will render as 300px in every browser
It will only render differently (in ie) if you add padding to the div, and there is a really simple solution to that (without using hacks), but thats for another post unless someone asks.

Thats what CSS is for - applying styles to html, no?

Things display differently due to the default CSS file every browser uses.

That's where the concept of a CSS reset originated.

See: YUI reset @ http://developer.yahoo.com/yui/reset/

[wirehopper]

I think the best layout is the one that meets the requirements well and can be implemented and maintained in a cost-effective manner.

I do recommend a separation of the style from the layout, regardless. By that, I mean using CSS to apply colors, positioning, margins, padding, etc - using class and id attributes. In-line style tags should be used very sparingly (there are times when you really have to use them).

As for ensuring browser compatibility and comparable display, validate your code, http://jigsaw.w3.org/css-validator/, http://validator.w3.org/.

Fun quizzes (great for learning new tags and attributes)
http://www.oneplusyou.com/bb/html_quiz
http://www.oneplusyou.com/bb/css_quiz

Choose what browsers you'll support. I build my pages in FireFox 2.0, with FireBug, then make minor adjustments using a separate CSS file and template logic for IE7, then cycle back to IE6 and forward to FF3. IE6 only has to be readable and functional, it doesn't have to be as good as IE7.

I use CSS for all my layouts, except tabular data.