In the beginning, God said "let there be tables," and it was good. But after a while, He got bored with His invention, and it rained for 40 days and 40 nights, and now we see posts with titles like "Want to transition from tables to <div>'s" and "Tables be gone - div question" and really lots more, but 2 examples should be enough.

What's confusing me is, we had divs way back when. So why didn't we use them? I realize CSS is only circa 2000, but CSS doesn't have anything to do with structure, it's about CSS. You still had to use <font color="red">this is stupid</font> inside of a table, so why didn't people just use divs from the beginning?

Seems that would have made plenty of people's learning curve easier today. Can anybody shed light on this mystery?

CSS has to do with PRESENTATION of the content. CSS support by all browsers was pretty lax for a long time and you had a number of years already behind us where the only way to control layout was to jigger with tables. It was the ONLY control we had - and it was ugly and a royal pain in the patoot.

DIVs came along as an 'extension' of HTML 3.2 and back then you used things like <div align="center">. About all you could do with a DIV then was to block out your content. According to the notes in my old HTML 3.2 book, "very few browsers support ALIGN on anything other than headings and paragraphs" .. circa 1996.

The major problem was browser support.

LadynRed, should have known that with a title like yours you would be the first to respond.

I personally have conceded to tables on several occasions. My time is simply more valuable than to spend 7 hours figuring out how to do something specific with CSS that I know works with tables in all major browsers.

I agree that we are in a transition period however I don't think that designers should sacrifice good design/artistic ideas based solely on the tables vs. CSS debate.

Well..thing I hate about divs... I SUCK AT THEM. I really need some serious lessons on div/css usage, because whenever i have a cool design thought out, I try it with divs and whatnot and it causes me endless trouble.

There is no question at all that learning to go table-less has a heavy learning curve. Once you get a good grip CSS, it gets easier, it IS worth it. I know what the (mostly) IE bugs are and how to beat them so I code accordingly. I can lay out a site in CSS in far less time than it would take me to go back to tables ! The only time it takes more time is when I'm trying something I don't usually do.. but that's true with anything.

As for good design and artistic ideas -- I have FAR more creative leeway without tables !

Originally Posted by LadynRed

There is no question at all that learning to go table-less has a heavy learning curve. Once you get a good grip CSS, it gets easier, it IS worth it. I know what the (mostly) IE bugs are and how to beat them so I code accordingly. I can lay out a site in CSS in far less time than it would take me to go back to tables ! The only time it takes more time is when I'm trying something I don't usually do.. but that's true with anything.

As for good design and artistic ideas -- I have FAR more creative leeway without tables !

I hate to call you out Lady (and please, I mean it in the nicest of ways) but could you provide some examples of your most creative table-less designs? Perhaps I lack a proper understanding of the capability of CSS or perhaps it is just that I have learned so much with tables that I have a hard time feeling that CSS is less constraining.

Rather than link to "my" sites, and have google wrongly pick up on the links, I would suggest you head over to CSS Zengarden and have a look around. www.csszengarden.com. There are many designers there with more artistic talents than me

Those designs are stunning but I can't help but think I would be able to replicate them in short order using tables which I am more comfortable with. I don't think that a great graphical design really highlights the point your trying to make. (please understand that I am half-way playing devils advocate).

The quote you made that I should have quoted directly (rather than the whole post) was

As for good design and artistic ideas -- I have FAR more creative leeway without tables !

My question then is how does CSS give you a creative edge over those who use tables? When I asked for an example (I suppose it doesn't have to be your own) what I would really like to see is something that someone could only accomplish with CSS alone rather than a mix of tables and CSS.

Can you 'stack' backgrounds with tables ?? Don't think so.. but I can with CSS and there won't be any images in the html either. I can manipulate the positioning of any background anywhere I please which is tough to do with tables. I've used the method on many occasions to turn my Photoshop design into a web layout - and my code stays clean and lean.

The most you could do with a table is put background image in the HTML on the body, then maybe put an image as a background of a table, then put images in the html on top of that in nested tables... and you'll be restricted in the way the images look because of the way tables work.

You might be able to come close to replicating a Zengarden layout with tables... but you won't be able to do it cleanly. The beauty of CSS Zengarden is that every layout is made of ONE STANDARD HTML file. The beauty of CSS is that you can get so many completely different looks by just manipulating the CSS file - and never touching the HTML code - which is the whole point of Zengarden.

Maintaining tables, changing layouts with tables.. all a nightmare - you have to change EVERY SINGLE PAGE. With CSS, I can change the design of an entire site by changing ONE file.

I know what the challenges are.. I've been building web sites for over 10 years. I used to use all the 'table tricks'..many nestings, all those spacer gifs.. a gazillion "slices" of an image to piece together a design - what a nightmare that was.

Republikan if you're looking for a site that shows a purely creative edge to css check out the CSS House and the CSS House 2. Note that neither house uses a single image and then think about trying to do that with tables and no images.

If you want to see some practical examples of css sites you can check the ones in my portfolio on my site. I'm not putting them up as great creative examples, but they are all css, including my site itself.

There are more creative possibilities with css, but I also think once you work enough with css it's faster to build a css layout and it's absolutely easier to maintain. CSS when done right creates less code and lighter files due to less reliance on images.

At the risk of tooting my own horn (when I only mean to provide an example) I don't think the gradient I used here can be done with tables:

www.lightenupontario.ca (left and right side of the page). Keep in mind that the bottom gradient only shows up at the bottom of the page, regardless of the length of the page.

That CSS house example is pretty amazing. I've never seen something that detailed with no images. Although in fairness, the second one is 200+ KB of html code. It demonstrates something that can't realistically be done with tables, but the CSS approach sometimes uses more code as its cost. A photo corners tutorial I read used one div for each corner and then another for the image itself. Almost everything is in the css, so the markup was just lots of divs with classes ... some techniques demand a lot of divs.

They're still a big step in the right direction. The galleries on my site are still a bit "under renovation," but if you look at my Seattle night photos gallery, it used to be a table with three columns for the thumbnails, which meant you need 1024x768 or better to not scroll, and if you have much higher than that, it was a waste, and you would scroll up and down more than necessary.

With tables, I could get around that by setting up a different version of the pages for different screen resolutions, and then use javascript to redirect people to the appropriate copy ... but with divs, as you resize the page, the content flows into place.

Great examples guys/gals. Thanks for putting up with me.

First off, thanks everyone who contributed to this thread. Even though it's purely academic, for me at least, it helps me understand the situation today to know how we got here.