Is it still true, to make cross broswer layouts for desktop browsers using table+css is easier then div+css?

Question

My one of web designer friend still making sites with table but he use css very nicely and I also use css nicely but with <div> and i face cross browser problem in layout more than my friend.

and i given some reason to my friend about cons of <table>. read my whole discussion with friend?

I - you site will be problematic with screen reader

My friend - OK, but i never got any call from any client regarding this.

I - you will devote more time to make any changes in layout, if changes comes from client

My friend - I don't think so, but if it is then show me how can i save time with <div>?

I - your sites will not work well with search engine.

My friend - it's not true. I've made many site and no problem with any site or client regarding this

I - layout is old way, non w3c and non standard way.

My friend - what is old and what is new, Who is W3C i don't know, What is standard? Whatever i make works in all browsers, it's enough for me and my client will not pay for standard and W3C guidelines rules

I - Your site will not work in mobile browsers

My friend - No problem for me, my client don't care about mobile phone

I - Your sites are not accessible?

My Friend - What do u mean not accessible? Whatever i make works in all browsers. my any client never asked about accessibility

I - You will not get more work in future, with table?

My friend - OK, no problem when clients will not accept site with table then i will learn about div based layouts in future.

My questions?

• Is it still true, to make cross browser layouts for desktop browsers using table+css is easier then div+css?
• What is the benefit for developer to use DIV+CSS layout in place of <table> layouts if client would not mind if i use ?

Answer 1

Laying web pages out with tables is probably a bit more intuitive for most people than CSS.

Depends on the layout though. Deeply nested tables can get pretty hairy. CSS layout options (basically float, at the moment) are a different way of thinking about page layout. I find it easier than tables nowadays, as I’m used to thinking about layouts in terms of CSS floats.

IE has a few float-related bugs. I think they’re the main source of cross-browser issues with CSS layouts.

Answer 2

table layouts results in more html, more html results in more code to write and maintain, and less clarity for dom manipulations via js. the amount of css code will remain almost the same (I'm not talking about 2004 inlinestyle markups, that surely will dramatically reduce the amount of css). and there is always the better seo factor that speaks against table layouts. so it can't be easier if you fully understand css. maybe you need to clarify what browsers do you include in your "cross broswer" statement, since its not even self-evident to support ie6 and ie7 nowadays.

Answer 3

Personally I find it much easier to think about the layout in terms of independent chunks rather than a table where the cells are tightly coupled to each other and dependent on each other. Having used both methods extensively, divs are easier when you've learnt about them.

Tables are a nightmare to maintain, too. If you want to add a column you need to make sure other rows aren't affected. Even with CSS, the HTML for tables is still very bloated and difficult to understand "at a glance" (particularly with nested tables).

I'd be surprised if tables really are a huge problem with screen readers (one would hope the software is smart enough to deal with all types of web pages). However, you should take all reasonable steps to make sure the site is accessibility to all, since it's the law.

Mobile phones can display tables fine. The only problem here is if you want to create a separate mobile stylesheet it's virtually impossible to remove the column format.

Finally for SEO, it makes no difference. SEs say time and again that the validity of code makes no difference.

Answer 4

Using a CSS framework makes creating layouts with DIV's a cinch!

I personally use 960 Grid System, but theres plenty of others out there too.

Answer 5

CSS is more flexible and cleaner. Period. I personlly think that 3 nested divs with meaninglful names is much more readable than 3 table tr td s right? There is a reason it's the new accepted standard. I use tables. But only when displaying tabular data. Once you learn the tricks in CSS you can write super clean div structures that are completely cross browser compatible.

I remeber a time I felt like your friend. It was mainly based out of fear. Don't be afraid. And remember it's us developers that determine the future of code and browsers. Agree with all the other answers on here too. No matter how you do it (from scratch) or grid layouts, you'll be much happier with a tableless layout. And to agree with the above, thinking of the site as blocks helps a TON. Good luck!

Answer 6

As nobody mentioned this: HTML aims for semantic markup. That means, the tags you use have a semantic meaning.

So using table for tabular data is fine and the only way to do it.
But using table for layout contradicts the semantic meaning.

And the relevance of semantic should not be underrated as semantic is what the WWW is striving for now (Semantic Web). I know that Semantic Web and HTML are not necessarily connected, but I guess using HTML the right way can only help.

Creating appealing layouts with divs might be more difficult. This comes with the advantage of greater flexibility.

And as already mentioned, maintainability can be a pain with tables.

I personally try to keep my HTML files as semantically correct as possible, i.e. using the right tags for the right purpose. The look (which a layout belongs to) is a matter of CSS.

Btw. if you are searching for CSS vs tables get a lot nice comparisons (most in favor of CSS).