Sorry, give me a REAL site design and then we can talk. Designing some arbitrary layout in tables and then challenging someone to do it in divs is silly. I am sure I could come up with an example of 25 information bits I need presented in a space of 250px by 250px, but that is far from reality.

The real issue here the creature of habit. Too many web designers/developers default to tables when they implement a design. Take a random design that can be done in a table or with some divs. You should use divs. Why you ask? Not only is it is semantically proper, but the non-graphical version of the data is presented properly.

If you put data into a table, a text representation pushes all of the data into one big long string. Gross. Use divs, and the data is nicely segmented. Beyond that, you can logically order information in a way that make sense for text reading, and then use style sheets to make it look correct for the graphical view.

Using tables also forces you to always have a tabular representation. Say if you want to rearrange the information you have to change the table structure rather than just changing the css.

All that said, sometime it is impossible to implement a design without using tables. Some of what is holding us back is CSS2 (CSS3 should fix most of this) and browser implementations. If only all major browers obeyed min-height (I'm looking at you IE).

On a secondary note, I think that the more designers know about best-practices and understand CSS, the more likely they are to design something that doesn't require tables or crazy CSS hackery. That's right, I think our medium of presentation is a limiting factor. So my counter-challenge is exactly that. Starting thinking about how you are going to implement something as you design it. It shouldn't rule your design, but it should be in the back of your mind while designing. This is exactly how we developers roll. There is very little we can't do, but sometimes the benefit is not worth the effort.

"tables are the telegraph of web design." -me

That is the most ridiculous layout I've ever seen.

My dad once made a fender out of duct tape. FYI: Duct tape bodywork is about as sensical as table layouts.

BTW, this is some pretty tough talk from a group of people that wouldnt know what to do with a

"Tonight on Dateline: The Internet; informational medium, or big-ass artistic expression? We'll hear from two debators: Bob, who is just trying to sell wing-nuts through his website: bobsnuts dot com, and Christian, who staunchly believes the site will look neater if all the text was vertically aligned without the use of padding or margins."

I believe strongly in applying the KISS principle to page layout. KEEP IT SIMPLE - STUPID. Many of us have had the misforture to work on sites developed by others, particulary those done on some WYSIWYG editor, which handle layout in tables nested 7 layers. I've had some similar experiences with CSS sites as well. If it takes someone 20 minutes to figure out your code or make a minor change, you've done a crappy job laying out your page. Period. It doesn't matter if it's CSS2 compatible or not.

CSS makes a lot of promises about the value of separating content from layout, and in most cases it really does reduce the amount of code involved in layout out the page. But in some cases the only way to make the layout work is to nest DIV tags within DIV tags, sometimes 3 or 4 layers deep. In doing so, you're no longer separating content from layout. You're just substituting table cells with DIVs, usually making the code far more complicated read and update in the process.

The best way to lay out a page is inevitably the simplest and cleanest way to implement the design. Apply CSS wherever possible. Eliminate code that doesn't serve a direct purpose, such as empty DIV tags which sometimes get used to replace the trusty old transparent .gif. Most important, don't buy into the argument that there is only one right way to do something, particularly if the 'right' way involves adding 10 extra DIV tags to shim, squeeze, pad content, or create breaks or white space on the page.

Look at this. Making me reply on my vacation. UNBELIEVEABLE! You have all completely missed the point (and have ignored rule number 1) of div test 2K6. The point is can it be done, not why or the benefits of hamburger A over hamburger B. This wasn't meant to be this sort of debate. I agree that DIVs totally beat out tables in most all cases, especially when you bring CSS into the equation. All I'm asking for is for you to show me a DIV based layout that will mimic the table. End of story.

Will: As we progress through this test, the tableset I made WILL become an actual site. This is just step one, I'm just asking for what I made in tables made with divs. Thats all. From there, we will apply content and more formatting to see which of the two mediums handle the test better.

All that being said, enter the test and submit your pages/code or withdraw from DIV TEST 2K6! F minus for all of you so far. Can you do it or not? Test part one will be graded Wednesday. I'm really looking forward to some div based solutions. That is all.

Play nice or I'll send you all to NY!

Primarily this "test" just demonstrates the shortcomings of the current implementation of CSS in most browsers (especially Internet Explorer) and so, although this may be a valid demonstration of the continued reliance on tables for specific cases, it is not exactly a relevant point in the table versus div debate.

Ultimately CSS may be stable and uniform enough across all browsers that you can use it for ALL designs, it is clear that this isn't the case now, however what does that really say? To me it says: "if you want uniformity across browsers you have to use old technology or compromise your design" rather than "tables are the only way and DIV tags shouldn't be used".

Let me take this discussion ad hominem for just a moment to point out that your blog's page design uses DIV tags primarily. Is your point to incite some trolls to come out of the woodwork or are you genuinely confused on why using DIV tags is a good thing? It would seem as though it's not the latter as your site demonstrates a command use of DIV tags...

For me, using the DIV/CSS is a natural one because it lets me objectify my content and provide styling on an object by object basis. It seems to me that at the current time it is still a matter of preference, but DIV tags do typically allow greater flexibility in the logical order of content in the design which makes ADA compliance issues generally easier to address. There are definitely advantages to each approach, but each incremental step in browser tech shifts that advantage away from tables.

As an aside, I was able to provide a fairly accurate representation of your design in Safari and Firefox in about 10 minutes, but IE was a mess. Additionally, not having a reliable means of making DIV tags stretch vertically is a major set back to using this sort of design. Having said that, I can't think of any situations where I needed that anyway. Even if I want the background behind a sidebar to continue, I don't necessarily need that sidebar itself to continue. But again, my personal preference in page design doesn't dictate the rule so I'm sure someone out there would have a design where that particular DIV tag limitation would be a problem. And that person would be totally within his rights to use a table to make it around that.

My 10 minute abandoned attempt... http://errol.errolandanna.com/creations/DIV_test_2K6.html Although I did play with it beyond 10 minutes (almost 45...), I didn't find any changes from that experimenting that made the design in anyway closer to your test case. (Although pixel perfect values helped IE enormously... it did nothing but make the Firefox/Safari solution less flexible.

Well, between the time I started writing my post, and the time I actually posted it you pretty much addressed my comments... If I have more time I may make more changes to my submission.

Errol, if you ever need a job...

So Christian, give me the final site design and I will do it. I won't mimick some table layout, becuase they have completely different styles for different uses. Who knows, you may have chosen a limiting implementation for the design in question.

OH SNAP!

Will, you kind of made my point with you last point. Of course I made a design that wouldn't translate well into DIVs. Just like you said, different styles for different designs. I'm trying to show that tables arent so bad with handling what divs can't handle as well. As Errol said, vertical flexibility alone is enough for me not to leave tables behind.

Basically, once you all complete this part of the test, youre done. That layout is the final layout you have to do.

Errol, thanks for your time and excellent points. I expected this thing to be controversial, but not like this! So far Errol is in first place.

Anyone from iMarc actually going to take the test?

Perhaps it would have been better to title your blog: "An Instance Where Tables Make Sense", not "Divs vs. Tables". If it really was Divs vs. Tables we would compare an implementation of a design in divs and tables for an "average" design.

I am quite certain it is possible to come up with designs that work in tables and not in divs. As I said before, I don't think that is the issue. Anyway, I look forward to seeing the actual design and how you implement it in tables.

Is this a private blog that I just stumbled upon? Or am I apparently the only non-member brave enough to chime in? I was just a little confused at the fact that I'm the only non-member to have commented.

Just an aside...

Errol, it's definitely not private. Unfortunately most non-employees only seem to comment on blogs about Jessica Alba, Tsunamis, or Zombies. Hopefully, as this grows, designers and developers will comment on some of the more serious posts. Thanks.

Will, lets do that. Lets get serious with a simple design (perhaps concocted by Craig in 5 minutes of his free time) and we'll each cut it up. One only using DIVs, the other only using TABLES. Then we'll put the two sites through their paces and make a list of definitive pros and cons.

I agree I used an overly ambitious title. Mainly to get peoples attention. I didn't expect this to get so confusing. The point I was trying to make has already come through essentially. That since tables have been the standard for so long that they will generally display peoperly on most systems. Additionally, to show their ability to scale depending on what content lies within each cell.

To be honest, this first test was a cheap shot at trying to show the flexibility of a table in relation to a div. I was however hoping that one of you guys to show me up with a clever div based layout to make me eat my words.

I'll think this one through some more and we'll chat. I have to get some sleep, my vacation ends in a few hours, and DIV TEST 2K6 rule #1 is rolling over in its GRAVE at this point.

P.S.

Its not too late for you guys to come through with your div based layout....I'm just sayin....prove me wrong.

First of all, I want to say that you guys are awesome! I found out your website through Kim. She got lost going to my school, I helped her out and save the night. But I personally think Divs are very hard to master. You're right... I tried to use divs and it look perfectly fine on IE but when I tried to view it on Firefox... It looks like crap. Table are very stable and easy to use but they are over rated and alot of people are using it. There are other ways where you do not need a table. Go to my school's website.... www.Bentley.edu. Not a single table are used. Pretty neat huh?

Also a lot of people are abusing tables and it's not a good idea because it takes for ever to load. For example look at USA today and look at my school's website. I know I know, USA today have more graphic but still, it will be so much better if they use a little less table.

I HAVE to comment, being an artist who is a developer because being an artist didn't pay enough. But don't get me wrong, I have a developer mindset.

I thoroughly get the point and I'm going to have to go hybrid on some new implementations of site design for my company. Minimum table STRUCTURE, DIVS to make it all look just right.

I won't see myself doing it strictly TABLES or DIVS, but hopefully an intelligent marriage of the two.

Thanks, this was helpful, and of course... proves the mindset of the developer who will ALWAYS follow their own rules and break rule #1. :)

Hello, ok so if you had a huge site and needed individual sections to load then you would use divs? I've seen a few Div,as having trouble replicating a table layout using divs - they weren't the brghtest fellows but still. So does it boil down to tables and divs? or is divs-only the way to go?

I realize this "battle" was posted nearly a year ago, but I stumbled on this website and I figured I would give it a go. I'm not sure what you mean by light CSS though. I'm guessing we weren't supposed to use much CSS, but I couldn't get it to work otherwise. Oh, and a disclaimer...the code isn't the pretty. Oh, and I used IE7 and FF2 to do this, so I'm not sure if looks right in IE6.

It took me about an hour and a half to get all the display errors corrected between IE7 and FF2 and than to get my template to look exactly like your's. I kept the text above the template in my page so it makes it easier to see that they are exactly alike.

The page is also valid XHTML Strict 1.0, or so W3C says. So, anyways, here is the link: http://www.plugbrainhere.com/demo/template.html

Amendment: Should have checked FF2... My template and your's are a tiny bit different. Oh well, close enough for this I guess.

Justin, thanks for taking the time and having the guts to attempt my challenge. Many things have changed since I first wrote this blog, but one thing that has NOT changed are my feelings on how useful tables can be as a tool for creating a fluid, automatically scaling layout. Especially for a person interested in creating sites who is just getting started. Tables are very forgiving and are much easier to grasp than the box model in most cases.

Your attempt is the best I've seen as far as likeness, however, as you note yourself, does not scale gracefully as a table would. I applaud your efforts and respect your honesty! If I had an incredible prize, you'd get it for your candor.

Since this blog was posted, I have come to terms with the 'semantic' reasonings behind using divs as opposed to tables, however, when creating a layout similar to the one I devised, would anyone really be able to re-skin any div based code posted here without using absolute positioning to change the layout? I think one major issue we never really touched on here is that when people redesign a site, its not merely the CSS that changes. I fully understand why CSS SHOULD be used to change the appearance of a site, but I wonder how often Pat Layoutguy sits down with his/her CSS file open and nothing else. Sure, there are amazing sites out there that can be changed only by modifying only the CSS (zen garden etc etc), but I know that when I personally redesign a site, I like to cast off the shackles of the existing markup as well. Although, perhaps now that all of our sites are semantically written and disgustingly valid, we can truly see the benefits. I'm currently designing a template for an existing site where users can modify the graphic elements to customize the look of their own store. I think when all is said and done in regards to that project, it will make for a very interesting blog.

I realize I've gone far off topic here, but I still think that there is much to discuss. Keep your eyes peeled for another challenge in the near future.

I always thought the idea was to provide a quick and aesthetically pleasing experience to the end-user. If tables do the job what's the big problem? If Div proponents start speaking in end-user gain terms then I would respect the argument. But for the vast majority of sites it matters very little. The web is going through a phase right now where, a la apple website, there are a bunch of divs neatly stacked vertically and horizontally. If trends deviate from this, the architectures and owners of CSS technology will have a lot of catching up to do. And you know what, it's not that crucial to pander to .03% of visitors who still use Netscape 3.0, IE 5.0...It's why developers are developers and not business leaders...

I am really surprised at the lack of attempts at this. Looking over it doesn't seem too complicated. Maybe I'm missing something. I may give this a try later for kicks. Being its a really old post, maybe not. But really, why did everyone jump on this so negatively?

Anyway, great blog, yada yada yada. :)