DIV vs. TABLE: BATTLE 2K6
by Christian Keyes - April 29, 2006 / 6:34pm View more articles
The time has come. The battle will be waged. Tables vs. divs.
I'm not saying, "Pick a side", I'm just saying lets not forget our friend the table. He's flexible and can be fully styled to suit any occasion. Let's not forget why we loved him for the first umpteen years before divs truly became necessary.
There are some people out there who think table use should be restricted to "tabular data". Take duct tape for example. In a world run by these people, that stuff would be used only for ducts...and nothing more. You'll never see them put toothpaste on a pimple or use a can of soda to unclog a drain. Just because something is designed for one purpose doesn't mean it can't be useful for other applications.
These people (lets just call them 'developers' for clarity) believe that a div should be a designer's lone layout tool. This perplexes me, as the div can be pretty shifty in regards to flexibility and compatibility. Developers love flexibility and compatibility. What gives??
Without further ado...I present DIV TEST 2K6!
This is the page you will replicate
Once a developer completes this challenge, he or she (who am I kidding...a female developer?!? HAHAA....kidding. Step up ladies) will post their code or link to their page in the comment section.
Don't get too fancy. For this first part of the test, I'm only asking for what I've just provided. Do whatever you have to do to get it looking like mine and validating. From that point, your code will be run through more tests against mine to test flexibility and compatability.
Here are a few rules before you begin:
I will check back on Wednesday morning when I return from New York. Good luck and up with tables!
There are some people out there who think table use should be restricted to "tabular data". Take duct tape for example. In a world run by these people, that stuff would be used only for ducts...and nothing more. You'll never see them put toothpaste on a pimple or use a can of soda to unclog a drain. Just because something is designed for one purpose doesn't mean it can't be useful for other applications.
These people (lets just call them 'developers' for clarity) believe that a div should be a designer's lone layout tool. This perplexes me, as the div can be pretty shifty in regards to flexibility and compatibility. Developers love flexibility and compatibility. What gives??
Without further ado...I present DIV TEST 2K6!
PART ONE: REPLICATE
I have created a simple tableset. I have used CSS to position text within the cells of the table as a placeholder. This first challenge will be for anyone who so wishes to replicate my example using only divs and light CSS. Additionally, I have set up the page in our XHTML strict format. My page validates and looks identical in both IE and Firefox.This is the page you will replicate
Once a developer completes this challenge, he or she (who am I kidding...a female developer?!? HAHAA....kidding. Step up ladies) will post their code or link to their page in the comment section.
Don't get too fancy. For this first part of the test, I'm only asking for what I've just provided. Do whatever you have to do to get it looking like mine and validating. From that point, your code will be run through more tests against mine to test flexibility and compatability.
Here are a few rules before you begin:
1. No excuses.
I don't want to hear nerd ramble for 37 minutes about how XHTML won't allow you to confabulate the elongator of the bla bla bla. Don't want to hear it. The page must validate and look identical in both IE and Firefox.2. Time.
My tableset was created, validated, and tested in 18 minutes while I chatted online and ate some vanilla yogurt. ALthough you will not be penalized for time, be quick about it.3. Flexibility.
Keep that in mind for future tests. I can't give away upcoming test scenarios, but I'm giving you a heads up; keep it flexy.4. No WYSIWYG editors.
Dreamweaver...I'll allow it. I used Notepad. I don't know of any WYSIWYG editors that can make complex nested divs...but if so...don't do it. I won't be able to tell...but your conscience will.5. No teams.
Lets keep this simple. Developer room: I better not hear any chatter while the test takes place. Heads down when you finish.GO!
I will check back on Wednesday morning when I return from New York. Good luck and up with tables!
Comments have been turned off on this blog.
Read something more recent.
Statements and opinions expressed in this blog and any comments
made are the private opinions of the respective poster, and, as
such, iMarc LLC is neither responsible nor liable for such
content.
Hiring: We’re hiring a
RSS
26 Comments
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.
My dad once made a fender out of duct tape. FYI: Duct tape bodywork is about as sensical as table layouts.
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.
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!
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.
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?
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.
Just an aside...
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.
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. :)
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
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.
Anyway, great blog, yada yada yada. :)