<Table> vs. <Div>

<Table> vs. <Div>

  • Comments 7

"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 http://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: http://www.csszengarden.com/. Jeff Atwood says, “Zen Garden puts the holy grail of separating content from presentation [CSS] squarely in view.” http://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 http://channel9.msdn.com/showuserthreads.aspx?userid=33347).

  • What I find odd is how rare it is to find people who get OO and also get CSS . But both technologies serve the same purpose.

    You tell the developer using tables for layout that by using CSS you can separate out their content from the style, and they'll complain that it's just easier to dump it all in a table and it gets the job done. But you tell the same people that you didn't feel like breaking up the code for handling the business logic and presentation so you just dumped it all in the Page_Load event of your ASPX page because it gets the job done and they'd have a conniption fit.

    But you look at the people doing some of the better CSS work out there and they are basically just barfing it all out from PHP scripts filled with hacks and all kinds of goofy stuff.

  • The only real advantages of CSS-P is the greater flexibility of design and graceful degradation, useful for those who serve the web with the styles off. All the other advertised advantages are bunk. CSS-P actually takes longer to make and is harder to maintain and redesign, especially if people of different skill levels maintain the same site. Tables are much simpler for most people to work with, and they are much more stable. Cell phones nowadays take people to the real web, and blind people are not likely to visit photo galleries or web stores - it is easier to shop over the phone. CSS make tables much better and simpler and this is another reason to use them.

    I design pages in both CSS-P for big clients, and tables+css for private clients who actually want to be able to maintain them themselves. I certainly don’t think that tables are evil.

    Think of CSS-P as the M-16 and tables as the Kalashnikov.

  • @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

  • 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.

  • 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.

  • Uhm.... "<div>" elements DON'T serve to "compose layouts" as Milan posited. They're just meaningless elements which you can arbitrarily style using stylesheets. You can style ANY element, not just <div>, but also <dl>, <ul>, and <acronym>.

    This is a major problem with CSS and XHTML, people get started with the wrong impressions, reinforced by bad tools which instill the wrong habits. People think of (X)HTML as defining "what the page looks like" rather than "what it means".

    As for Peter's comment about CSS-based sites taking longer  to develop when compared to tables, he is flat-out wrong. I am a very strong CSS user and I can create a CSS-based design in less than half the time as a table-based one and with a greater degree of flexibility.

    Ever notice how it's always the people who don't know CSS who like to talk crap about it? You'll find almost no-one who knows CSS properly who doesn't use it on every project they do.

  • I know CSS properly, I have used CSSP on dozens of sites. I do not deny the advantages of CSS for styling. But CSSP presents a real problem. Each and every time I made a pure CSSP site, I had to go back and fix it a few months later, simply because the folks who were updating it in my absence turned it into a real mess. CSSP is great for gurus, but it is a nightmare for ordinary folks who just want to change some text and want nothing to do with browser quirks. Maybe, some day, when CSS is truly cross platform supported, W3C box model is made user friendly, WYSWYG editors know how to handle css and every office secretary is a CSS guru, we could forget about tables entirely. Until then, tables are still more practical for some things.

Page 1 of 1 (7 items)