Benefits of using div over table layout

[guest2013-1]

So I'm sitting here pulling my hair out because IE is being a little bitch as usual. And I was thinking, this **** can be done in a table layout. Why the **** am I complicating my life with using a div layout with CSS?

I can understand the viewpoint from CSS where you load multiple icon images into one PNG and call it like that. I can even understand about the background horizontal/repeat (or whatever, which still can be done in tables)

What I can't understand though it *why* layouts are done entirely in divs nowadays. For some reason I feel the compatibility between IE/FF/Chrome/whatever is lacking so much that it's not worth it. Pop a table in there and **** the rest. It's where I said it would be in both IE and FF and I couldn't care less because the layout is the same in each.

What are the benefits? Other than just applying a new stylesheet and having different pretty colors or a new "theme".

 

[Drake2007]

linky for you.

http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/

there are technical reasons beyond pretty colours.

 

[guest2013-1]

I can debunk most of those reasons dude... srsly. Not one good reason there that you can't have with tables if you're smart (like me )

# Universal cross-browser style declarations

Biggest bull**** I've ever read as a "reason" why CSS is superior to table layout.

Including the weakass comment about "no more javascript rollovers". You can still use CSS rollovers with a table based layout. WTF? That's not a reason why my website can't be table based instead of <div> everywhere (I ****ing hate IE)

And the mediocare comment about SEO being better because spiders can crawl it faster because of it's reduced size? HAHAHAHA If your website is so ****ing huge in a table layout design you're not doing it right.

Interactive elements? Still not a convincer for me to use CSS layout above table layout (especially when it comes to that ****ing stupid IE)

Srsly? 13 reasons why? No....... my website uses CSS pixel mapping/roll overs and utilizes DOM like jquery. With a table layout, it's the same with a CSS layout (except my CSS file is a lot smaller and my table layout is more or less the same with the div sizes there as well)

No man. 13 reasons. Not 1 convincing me that the only reason to use all div's is for pretty colors...

 

[Drake2007]

It's more about seperating content from the "pretty"

CSS sprites are cool.

"No spacer gifs
Printer-friendly style sheets
With table-based layouts, there is no advanced selector labeling available. Instead, tags such as table, font, tr, and td plague the content documents"

 

[GreGorGy]

I simply have to agree with AR: I have done both and generally, the IE6 hell always comes back to haunt me. No matter how cool stuff may look in DIVs & CSS, if it takes bucket loads to make it happen in IE6 where a TABLE will do the trick, I go for the table. Perhaps the reasons above apply for first world true bandwidth cheap computers but in our real world, that simply is not the case. I wish web designers would take a little time away from their 98" monitors to see how their users live: 13" laptops, IE6 cos Vista is a nightmare for which they are ill-prepared. Because more than 13" is over compensating. Because in our real world, we seek functionality and beauty, not whiz-bang effects that the dev thinks is cool...

 

[Drake2007]

I raise you the Time Breakdown Of Modern Web Design and this

cool one "Time spent trying to get that bastard to work in IE"

 

[icyrus]

Flexibility and accessibility, leaving out the matter of correctness...

 

[Necuno]

So I'm sitting here pulling my hair out because IE is being a little bitch as usual. And I was thinking, this **** can be done in a table layout. Why the **** am I complicating my life with using a div layout with CSS?

I can understand the viewpoint from CSS where you load multiple icon images into one PNG and call it like that. I can even understand about the background horizontal/repeat (or whatever, which still can be done in tables)

What I can't understand though it *why* layouts are done entirely in divs nowadays. For some reason I feel the compatibility between IE/FF/Chrome/whatever is lacking so much that it's not worth it. Pop a table in there and **** the rest. It's where I said it would be in both IE and FF and I couldn't care less because the layout is the same in each.

What are the benefits? Other than just applying a new stylesheet and having different pretty colors or a new "theme".

have a looky
no more tables, use them div's for layouts !
http://developer.yahoo.com/yui/grids/
http://stopdesign.com/archive/2004/07/27/throwing-tables.html
http://www.hotdesign.com/seybold/everything.html

 

[Nefertiti]

with the new css 3 layout would be sooo much easier. but then if you code for ie6 u still screwed

all our designs have rounded corners *sigh*, not a fan and its a mission to make it work everywhere. but this is cool:

http://www.zenelements.co.uk/blog/css3-border-radius-rounded-corners/

 

[WiT8litZ]

Just because you CAN use pool cues to plough a field, doesn't mean you SHOULD.

divs + css is the way to go for all the reasons mentioned as well as for the sake of just doing things right

 

[guest2013-1]

I haven't gone through the other websites mentioned. But it's not only IE6 that's the problem. It's IE in general (and general browser compatibility)

Why should I spend 8 hours trying to figure out why IE doesn't show the left navigation bar in the right spot but FF (and all other browsers) does, where I can spend 10min and pop in a table?

The way you design your web application (or site) as well... you don't need extensive div/css only layouts to make it accessible, or to have it load faster, or to make the design easier to change.

It will take me less than an hour to change a design of my site.

I'm not arguing that splitting the visual and content is what to aim for, but then why not just use XML and XSL? That is true splitting of content and layout. With div's taking the place of tables, it's more or less the same thing, except, they're now governed by a stylesheet.

A combination of CSS Sprites, well-formed HTML (yes, tables) and a CSS Rollover (<ul><li> based style definition) is all you need to make a website compact, easy to interpret and "snazzy"-lookin'

The sites I've done are most of the time smaller and faster than their div counter-parts. And compatible in all versions of IE/FF (etc) because of the simplistic use of CSS (and sprites) and normal, down to earth this is how it will look like, HTML.

As I said. I can't find one reason why it's better other than "industry standard" as I feel a combination of technologies is what is best at the end of the day and the technology used should fit the project.

I will go read those other websites, maybe it will convince me, until then, the nightmare of making all IE versions compatible with something that works brilliantly in FireFox (and others) just for the sake of having everything div's are downright stupid and a waste of time.

It's like when my junior's first discovered AJAX, and couldn't solve a simple cross-server issue (trying to download a report csv from a different server using AJAX) and couldn't figure out (or think of) that you could use server side scripting to handle that for you.

You guys are basically saying Here's a hammer, it will moer anything you like into anything you like... which simply isn't true in all situations.

 

[Necuno]

Why should I spend 8 hours trying to figure out why IE doesn't show the left navigation bar in the right spot but FF (and all other browsers) does, where I can spend 10min and pop in a table?

Didn't take me 8 hours to have it work in ie7/8 and ff; i used mostly fieldsets and 2x divs. however if it is small and insignificant i use a table, but if it repeats on the page rather go via the div/fieldset method. i'm sure you didn't just throw in the towel at first sight when something else was a bit of an effort or a little extra work at first, right ?

 

[guest2013-1]

Didn't take me 8 hours to have it work in ie7/8 and ff; i used mostly fieldsets and 2x divs. however if it is small and insignificant i use a table, but if it repeats on the page rather go via the div/fieldset method. i'm sure you didn't just throw in the towel at first sight when something else was a bit of an effort or a little extra work at first, right ?

no but when I consider i work for myself and that every hour I spend doing something that could've been done in 5 minutes keeps me from making ends meet at the end of the month, then I'll be quick to throw in the towel.

like you just said, if it's something small and insignificant you'll throw in a table. I'm all for using div/fieldsets for data. Don't get me wrong. That's why I said each thing has its own place in the entire aspect of a website. That being said, I'm not a web designer, so these things do not come easy to me. But I've seen a web designer struggle for 3 days to get something to look like it did in FF for versions in IE.

I pay for his time. And I can't think that that much money is spent just because everything "must be in div"

 

[Angstrom]

Hope this helps:

http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

 

[murraybiscuit]

tables are for tabular data and are represented in different ways on different screen media. that's why they have specific attributes and tags like caption, summary, th, col, colspan, thead etc. that said, tables vs divs are the least of your worries if somebody is viewing your site via tty...
you can also use tbody and multiple tbody tags with a thead and tfoot to make the data scrollable - most people don't use the full potential of tables. read the w3c spec on tables, it's very interesting.
btw, according to spec, you also don't have to terminate most sub-tags within the container (tr, td, colspan, thead etc).
css 2 doesn't play nicely with tables: cellspacing and border collapse aren't properly resolved imo. ie also has issues with td's which have a border and are hidden on page load via css 'visibility' attribute and then set to 'visible' via js.
firefox has issues with show/hiding tr's, messing up the layout when displayed again as block.

i have finally gotten round to using div only layouts on my sites. but there's a few things that i still use tables for:

1. multiple column layouts... alistapart has some good articles with some div and css solutions. i just don't think that the elaborate workarounds to produce something that a table can simply do are worth the effort. you might be able to do it without using hacks, but by the time you've finished faffing with the css and testing across 5 browsers, you could have finished the rest of the site if you had used a table.
2. forms. not really tabular i know. but i have yet to see a dd/dl or div based form which can do the following: auto-stretch the left column to the width of the widest field label and then start the second column containing fields to the right of that. maybe a way exists. i don't know about it. in fact any kind of alignment based on an unknown width is where divs fall short imo. mostly because css inline-block on divs is poorly supported in ie and using javascript is a poor solution.

 

[FarligOpptreden]

Acid, it is well worth it getting your mind wrapped around DIV / DL / LI tag-based content structuring and then layout with CSS. It took me a few months to shift my table-layout mindset to CSS-layout. Somehow, I don't even know how I was able to do proper layouts using tables. DIV / CSS combination just works SO much better and gives you the flexibility to change the complete layout of a page in no time. When you do a layout for a page using tables, you're pretty much stuck with that layout and can only use CSS to change colours and fonts. Using the float and position CSS-attributes you can change the layout of the page radically, as is done by CSS Zen Garden.

 

[Lord-Nikon]

with the new css 3 layout would be sooo much easier. but then if you code for ie6 u still screwed

all our designs have rounded corners *sigh*, not a fan and its a mission to make it work everywhere. but this is cool:

http://www.zenelements.co.uk/blog/css3-border-radius-rounded-corners/

Just to amend to your post, you can also use it inline instead of CSS thus steering away from DIVs but sticking to tables : http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm

 

[Lord-Nikon]

After reading this thread I agree, with everyone! Tables are useful especially for reporting, forms, data entry etc. Whereas DIVs and CSS are useful for layout, styling and look & feel of a site. Thus bringing me to the conclusion : Tables and Divs are equally useful when building a functional yet visually enticing website (like a CMS)...

IMHO I don't think tables will ever completely fall away nor will DIVs fully take over the web!

my 2c