vs.

"Tables or Divs?"  It's a classic question in the web development world, sort of like "boxers or briefs?"

There is a mailing list that all of the Microsoft Regional Directors belong to.  Regional Directors aren't Microsoft employees--they're independent developers, architects, trainers, and other professionals who provide a vital link between Microsoft and the developer community.  A thread came up on the mailing list earlier this week asking that classic question.  Great discussion followed.  General consensus was that it's all about using <div> tags and CSS for layout and tables only for displaying 2D tables of data.

One theme that surfaced is that the code monkeys tend to prefer tables but designers are generally religious about divs and CSS.  That's been my experience too.  I'm not a CSS guru, so on the rare occasions when I find myself hacking HTML, I default to tables.  (Yes, shoot me.)

One of the posts on the mailing list had some tips for how to "de-program" a developer from using tables and get them hooked on divs and CSS.  I thought this was worth sharing:

From Scott Stanfield...

Tables are for displaying a grid of numbers, not for layout. 1x1 transparent GIFs and colspans are so pre-bubble.

My de-programming Check List:

1. Have ‘em watch my video (ASP.NET 2.0) here https://asp.net/learn/videos/video-47.aspx, where I show how to use master pages and themes to build a good CSS-based ASP.NET site.

2. Then show them what the designers have been drooling over: https://www.csszengarden.com/. Jeff Atwood says, “Zen Garden puts the holy grail of separating content from presentation [CSS] squarely in view.” https://www.codinghorror.com/blog/archives/000474.html

3. Then show them the new VS 2008 CSS tools—amazing. Then they should watch Daniel Moth’s excellent “CSS support in Visual Studio 2008” screencast (from https://channel9.msdn.com/showuserthreads.aspx?userid=33347).

Comments

• Anonymous
  December 14, 2007
  The comment has been removed

• Anonymous
  December 16, 2007
  The comment has been removed

• Anonymous
  December 17, 2007
  @Phil, You're right.  I'm a developer.  I get OO.  I "get" CSS.  I just never took the time to learn it well enough to use properly.  Just like your Page_Load example, Tables "just worked" and were easy for me to grok when I needed to get something done quickly. I'm sure I'm not alone in that regard.  I'm guessing most back-end developers who "get" OO probably are not web gurus.  Therefore, when they finally get the back-end right, they either don't spend the time figuring out how to do the front-end correctly in CSS, or they hand it off to someone who is a CSS guru who does it for them.   In either case...  you end up with "OO"-guys who don't have CSS expertise. -Peter

• Anonymous
  December 17, 2007
  Yay! Let's kick the dead horse! :) Tables serve to display tabular data. Divs serve to compose layouts. This is one of the points I stress in my presentations on web standards. Which route someone takes demonstrates how they approach web development: should something look big and bold, or is it a first-level header (H1)? Spaghetti code versus semantic markup. It's not easy to maintain proper markup. Nobody said it would be easy. Still, tables aren't easy to maintain either. I'd venture to say tables are much more capricious and unpredictable in maintenance, especially in older browsers. As to ASP.NET themes, I find them inadequate and completely redundant. Chasing the theming and skinning mechanism of ASP.NET is not worth the effort. It's much easier to skin a site with CSS files and a little discipline. Just my $0.02.

• Anonymous
  December 28, 2007
  I don't even know what to say to people who still go the table route. Are you still using Perl and Blat to send email from a webpage? Are you worried about how your page renders in Netscape 3.0? Seriously - if you still cling to tables for layout, I hope those stock options from your .com employer pay out. The advantages are NOT bunk - that is just a lazy cop out. If we don't move forward, we stand still. I got the 1 x1 px transparent .gif  monkey off my back and am living the clean life.

• Anonymous
  January 13, 2008
  The comment has been removed

• Anonymous
  January 17, 2008
  The comment has been removed