Tables Vs Div For Page Layout, CSS All The Way Options

[d3bruts1d]

Umm... you can use CSS with tables.

[DrAwesomePhD]

check out css zen garden they are professionals and they use div tags, therefore - div tags are good thats my logic! also i think theres a spiel about it on that aforementioned slideshow.. http://www.stopdesign.com/articles/throwing_tables/ ... check it out.

This post has been edited by DrAwesomePhD: Oct 27 2005, 12:19 PM

[ClayMeow]

I don't have much experience with CSS or divs, mostly just html (unless u count slight altering of my friendster profile with CSS. But IMO, tables are the shiz! I've been using them forever, since I started making webpages years ago. Hell, I use them for EVERYthing, not just websites. Often I use them in word documents just because they make everything formatted so cleanly. Man, my dad used to hate when I'd do stuff in tables in word and he'd go to print it out in wordperfect at work (at least back then it didn't translate well).

But anyways, tables are great . I'm not saying divs aren't though, cause I'm not familiar with them, but tables I know...and love

[d3bruts1d]

Tabels are inflexible, in the end of the day, require more coding and tags than the DIV and SPAN tags.
[right][snapback]561988[/snapback][/right]

IMO, tables are very flexible. I'll agree that it is more code, but at least they'll do exactly what I want across all browsers. That's the key thing to remember here. If it doesn't look relatively the same across all browsers, then it is useless to me.

The problem you mentioned with DIV's and resizing windows is in my opinion nonsence. Of all the sites i have designed (for my own personnal use and now in my job for the Police Force's Intranet) I scale my layouts so they fit nicley, no matter what the window width is.
[right][snapback]561988[/snapback][/right]

That's funny. Try putting a 3 column layout together with the left and right sides fixed at 166px. Make the middle section fluid, and then place a 468 px image in it. Looks great, unless you set your resolution to 800x600. At that point, the layout doesn't stick... now, you can use the 'min-width' CSS value for the middle column. Setting it to something like 470 px will hold the layout in all browsers except for IE. That's just testing on IE6 for Windows. You get into IE5.x for Mac, and things get really FUBAR.

Personally, I don't care about IE. I'd be happy to it the middle finger and be on my way. However professionally, I can't do that. Even with my own personal site, IE6 is the 2nd most used browser. And my site isn't advertised anywhere. The site I'm working on will be advertised, and I'm sure will get a lot more IE users...

Nested tables and gutters are the way to go IMO. Hold together real nice when using percents if the window is resized.
[right][snapback]561991[/snapback][/right]

Yup. I've been doing it that way for.... oh, I don't know... eight or so years now.

check out css zen garden they are professionals and they use div tags, therefore - div tags are good thats my logic! also i think theres a spiel about it on that aforementioned slideshow.. http://www.stopdesign.com/articles/throwing_tables/ ... check it out.
[right][snapback]567520[/snapback][/right]

Yeah, I know all about CSS Zen garden. Talked to the guys on the Opera forums, as well as read the book. They are professionals, but guess what; there are many other professionals out there that don't use DIVs or even CSS.... that must mean DIV's are bad.

Sorry, that argument doesn't hold any weight. What they've accomplished is amazing, however it's useless for what I'm doing. See my reply above to ShadowPaktu for examples.

[suchuwato]

I like tables, but more people seem to be switching to div. It's all really down to personal preference.

[ShadowPaktu]

That's funny. Try putting a 3 column layout together with the left and right sides fixed at 166px. Make the middle section fluid, and then place a 468 px image in it. Looks great, unless you set your resolution to 800x600. At that point, the layout doesn't stick... now, you can use the 'min-width' CSS value for the middle column. Setting it to something like 470 px will hold the layout in all browsers except for IE. That's just testing on IE6 for Windows. You get into IE5.x for Mac, and things get really FUBAR.

Yup, that is right, and your comment on compatabilty across ALL browser's is however true, tables ARE easier to use. You need to be slightly more creative when designing a page using PCSS, than tables. You need to readup and learn all about IE Box model, hacks, possitioning techniques, cross browser functions.

The min-width function doesn't work on IE (spec Mac), and this is where some creative planning can be thrown into the mix. You can either work around it by using a mix of different features, or you can just use the IE Ignore hack to ignore certain parts of your CSS, and run other parts that would have buggered up in other browser, but look fine in IE. Little more work, but same effect.

And if you need the code for your example, itl'l be here the next time i browse by these boards, i even have the PDA, print, and projecter stylesheets so you can display the page on those mediums (yes, it is possible!).

That last comment didn't make it sound too good

Lets not forget what CSS was meant for, content styling. The idea behind CSS (as to what i have learned) is this: It is a way of seperating out the stylng, from the content. Although you have to spend more work on PLANNING your css design for mstart, before you even touch the keyboard, that fact that you can use this one file, in EVERY file on your site, to get the exact same look and feel that we come to see, when we view sites on the web today.


An example was given above for CSS Zen gardens, fantastic bit of work, but it's not a good resourse for someone like you, that wants to know if they should use tables or divs to design a site. It's more of a "Wow look at that isn't it amazing!". It sure is, but it would be wasted in a commercial product.

The site you should be going to, is the site belonging to, what i would call, the father of the CSS revolution, as it were. He has been kicking of the CSS train for 12 years now, has seminars weekly accross the US and other parts, and does live demonstrations on reworking a live site, on the WWW, to a CSS compliant one. One such exemple he did was our beloved microsoft dot com. I belive he reworked the backend in an hour or so (may have forgotten the time frame), ripped out all the tables (note, that ms uses two or more different files for displaying their site on different browser's/resolution's!).

Anywho, his name is Eric Meyer, go check his site at: www.meyerweb.com

Im enjoying this 'debate' now, i hope you reply back on this with some conter points so i can address them the next time i'm here!

As a side note, i have a fully featured CSS file set for my force's Intranet now, that i can use on the majority of projects i do. This fact, in itself saves me about 15% - 35% of the time it takes to work my sites