blog

software/hci internet/webdesign

<div> vs. <table> (Part 2/2)

(August 31st, 2006 - 2:28AM)

This article is a continuation of <div> vs. <table> (Part 1/2).

I know it's been a while since I resumed this train of thought, but I've been pre-occupied with several important tasks such as beating Titan Quest. That's done now, so we can get back to the issue at hand.

First, it's a shame that I feel the need to join in on the debate between <div> and <table>, because it's already been argued ad nauseum. But unfortunately, it seems the battle isn't over yet. If you want proof, just view the source of any major website. Even Amazon and Dell use table-based design. So we've got a long way to go.

The problems with div-based design

It isn't surprising that the vast majority of Web developers have been slow to adopt div-based design, for the following reasons.

  1. It's less intuitive than table-based design.

    The nice thing about table-based design is that it lends itself well to the way we think about creating documents. Essentially you break a document up into a grid of different regions, make one your header, make another your footer, etc. If you want a column to be a certain width, you just click and drag that column in Dreamweaver until it's the right size. Just like Microsoft Word. Simple.

    Using div-based design, and for that matter using CSS (Cascading Style Sheets), is much more difficult. In proper div-based design, there's little to no formatting information embedded in your XHTML document. All that formatting information is put into your CSS. While this is one of the greatest strengths of div-based design, it's also the single greatest barrier to entry for Web designers.

    You really have to think about page architecture when using divs. In many ways, this makes div-based design more like programming than Web design, and that's probably one of the major reasons for its slow adoption.

  2. Browser inconsistencies.

    There's been a lot of talk about Web standards recently, and div-based design goes hand in hand with Web standards. Unfortunately, for something that's "standardized," div-based design behaves in an awfully nonstandard way.

    When you're designing with divs, all your presentation rules should be in a CSS file. (Technically speaking they don't have to be, but you get little benefit from div-based design unless they are.) But different Web browsers behave inconsistently when rendering CSS. In particular, assigning proper dimensions to div columns has proven quite difficult.

    Say what you will about table-based design, but it's a far more mature model than div-based design. People have been designing with tables for years, and almost all Web browsers will render these designs properly. Only newer browsers can handle CSS-styled divs properly, and even among those there are inconsistencies and incomplete implementations.

    It's not uncommon to design a page perfectly using divs, then to find that it only works in the browser you tested it with. In fact, the trick to mastering div-based design is learning all of the browser quirks, not learning about divs and CSS. This is an extremely unappealing way to think about design.

  3. Some things are extremely difficult to accomplish with divs.

    stevekwan.com is a div-based site. It currently has three columns: a menu column on the left, a content column in the middle, and a messages column on the right. (Note: This could change soon.) Setting the site up in this way was hard. CSS is good at a lot of things, but multi-column layouts are not one of them. It's much easier to create such a layout in tables.

    Also, for all the talk about separation of presentation and content, there are some aspects of presentation that are awfully hard to separate using CSS and div-based design. For example, try setting up a page so flexible that you can easily move the navigation pane to either the top, left or right using only CSS. It's not easy to do it well. Unfortunately, div-based design is limited by the order in which your divs appear in your source. Often you can navigate around this, but sometimes it just can't be done.

  4. The benefits are not immediately obvious.

    Most of the time, div-based design feels like a lot of work for little reward. You don't fully appreciate its value until months after your website is finished. When you begin maintenance, you'll quickly notice how much easier it is to shuffle around elements on your page when it's div-based.

But fear not! There are major benefits to div-based design, and they often offset these downsides.

The benefits of div-based design

  1. Easy to update.

    When your boss asks you to shuffle around the elements on the company website, you'll be very glad you can do it in one place with div-based design. In many cases, you can completely rearrange a div-based website using only CSS; you don't have to change the actual HTML at all! For examples, see some alternate styles of stevekwan.com: skylight, egomaniac, or good old original.

  2. Increased accessibility, and therefore, increased exposure.

    Speech readers have a lot of difficulty interpreting table-based design, because the document structure is often quite messy. This means that any blind users relying on speech readers will find table-based sites extremely hard, if not impossible, to navigate. By turning these users away, you are turning away a portion of potential business.

    This leads into the issue of human rights. Don't we all deserve access to information? Don't we all deserve equality on the Internet? Can we really say the Internet is an equal medium if it discriminates against the blind?

  3. Increased search engine visibility.

    Making your site accessible to the blind has the pleasant side effect of making it easier for search engines to understand. As Vincent Flanders of Web Pages That Suck said, "the most powerful Internet force known to God and man visits your web pages like blind people and folks who use Lynx -- Google."

    These days, companies are concerned about search engine optimization (SEO). One of the quickest and easiest ways to optimize your site for search engines is to use div-based design in valid XHTML!

  4. Printable webpages.

    People always complain about how webpages look great on the screen, but turn into garbage when printed. With div-based design, it's possible to make your pages look half decent when they're sent to the printer. Don't believe me? Try printing this page. Notice how it comes out looking like a basic Word document.

    With div-based design, it's easy to set up one set of presentation rules for screen display, and one set for the printer. You can even hide non-relevant parts of the page when you print. For example, if you print this page you'll notice how the menu and comments don't appear. I deliberately removed these because I decided that anyone printing these pages would likely be interested in only the content. In case you're curious, you hide elements of your page by adding display: none; to their CSS rules.

  5. Support for multiple devices.

    This is an extension of the previous point. In addition to making a different presentation for printers, you can make different presentations for hand-held devices and speech readers.

  6. Cleaner, more compact source.

    Ever looked at the source HTML of a table-based page? It's awful. The tables are usually nested so deep that it takes hours to untangle them. div-based pages don't have this problem. And because you have fewer nested tables, you have more compact HTML, which means it can be downloaded faster.

So that's why you should use div-based design. But in which situations is it appropriate?

When to use div-based design

  1. When the target audience is the World Wide Web.

    If your pages are going on display to everybody, you'd better make sure that everybody can see them. However, if you're designing an internal corporate website, you may have a better idea of how your audience will be using the site. In this case, div-based design may not be needed.

  2. When the layout is not extremely complex.

    Although div-based design is extremely flexible, more complex designs get very difficult. For example, three-column layouts are hard to set up using divs. It may not be cost-effective to use div-based design when tables are so much easier.

  3. When accessibility matters.

    You should use div-based design if your users may be blind or have visual impairments. If your target audience tends to be senior citizens, be sure to adhere to div-based design if possible.

  4. When pages are likely to be reorganized in the future.

    One of the biggest benefits of div-based design is ease of restructuring. If your page is something that's likely to be frequently updated, such as a company website, div-based design is a good idea. However, if you're developing a one-shot HTML document that will likely never change (at least not in terms of look and feel), div-based design may not be a priority.

  5. When the document may act as source material for something else.

    This one doesn't occur to most people. If at some point you'd like to convert the content of your page into another format, or import it into a content management system, the process for doing so is more obvious with div-based pages. Because div-based pages are simpler, it can be somewhat easier to extract their content. If you're lucky, you might even have a system that can directly import the content out of the page.

    Also, if you ensure that your pages are XHTML valid, you can manipulate the content through an XML DOM or SAX parser. For software engineers, this can be of tremendous benefit.

How you can test the quality of your div-based design

This is the easy part. There are three simple steps.

  1. Disable styles in your Web browser.

    Many Web browsers such as Firefox have this feature built-in. To disable styles in Firefox, select View > Page Style > No Style.

    If you've got a good div-based design with formatting information in CSS, your page should just be black text on a white background.

  2. Shrink your browser window until it's long and narrow.

    To be more specific, stretch your window so it's about 400 pixels wide and 400 tall.

  3. Attempt to read your pages and navigate through the site.

    In the tiny window you're using, the page should look and read like a newspaper column. If you're having difficulty navigating the site, reading the text, or viewing everything on one screen, then you may have a problem with your design.

Conclusion

To reiterate what I said at the beginning, it's really a shame that I'm writing this article. There's nothing here that hasn't been said better elsewhere. By this point, every serious Web developer should have adopted the technique of div-based design, but unfortunately that hasn't happened yet. At the very least, I hope this has been helpful and has motivated you to adopt cleaner page designs in the future.

permanent link - digg this post - 31 comments

31 comments

December 1, 2010
Awesome post. Really enjoyed reading your blog posts.
December 6, 2010
О! Tener un día DINAMITA mi amigo!
January 22, 2011
Finally, got what I was looking for!! I definitely enjoying every little bit of it. Glad I stumbled into this article! smile I have you saved to check out new stuff you post..
February 15, 2011
Really like the graphical design and navigation of the site, easy on the eyes and good content. other sites are just way too overflowing with adds
March 20, 2011
Thank you for the great information! I would not have discovered this otherwise!
April 17, 2011
Good dispatch and this post helped me alot in my college assignement. Gratefulness you as your information.
May 5, 2011
Walnkig in the presence of giants here. Cool thinking all around!
May 27, 2011
I have to admit that i sometimes get bored to learn the whole thing but i feel you can add some value. Bravo !
June 6, 2011
Wir haben ein bisschen Schwierigkeiten den RSS abonnieren, jedenfalls habe ich Buch markiert diese tolle Seite, ist sehr nützlich plus gefüllt mit Informationen.
June 8, 2011
Me encanta este post - totalmente kewl! ¡Bien hecho! Me voy a volver a este ...
June 15, 2011
Hello intelligent points.. now why did not i consider these? Off subject barely, is this web page sample merely from an peculiar installation or else do you use a customized template. I use a webpage i’m looking for to enhance and nicely the visuals is probably going one of many key things to complete on my list.
June 20, 2011
Seo wants a very good search engine optimizer plan. Just certainly one of these methods can make an enormous distinction in your websites place and company your website brings you.
June 28, 2011
Como novato, siempre estoy buscando en línea para los artículos que me puede ayudar. Gracias Wow! ¡Gracias! Siempre quise escribir en mi sitio algo así. ¿Puedo tomar parte de tu post en mi blog?
June 30, 2011

Bulls eye Very good Mathematics I am keen to receive trading signals from Smartfxsol.com I'd like to note their mathematical principle are good

check it on smartfxsol.com
July 18, 2011
I would like to alter one-way links together together with your online web-site is this probable?
August 18, 2011
Гей, дуже гарний блог! Людина .. Красива .. Дивовижні .. Я закладка вашого блогу і приймати канали також ...
August 22, 2011
You ought to really take into consideration working on growing this blog into a serious authority on this market. You evidently have a grasp deal with of the matters everyone seems to be looking for on this website anyhow and you can actually even earn a buck or two off of some advertisements. I might explore following current topics and raising the quantity of write ups you place up and I assure you’d start seeing some wonderful targeted visitors within the close to future. Only a thought, good luck in no matter you do!
September 5, 2011
As a newbie , I am always searching for websites that can help me. Thanks Wow ! Thank you ! I always wanted to write in my site something like that. Can I take part of your post on my blog?
September 5, 2011
This will be a terrific web site , you may be interested in an interview on just how to create it? If so e-mail!
September 15, 2011
Highly rated post. I study something completely new on totally different blogs everyday. Deciding on one . stimulating to learn the paper content material from other writers and learn slightly something from their website. I’d like to apply certain of this content on my weblog you’re mind. Natually I’ll give a hyperlink right here we are at your web-site. Respect your sharing.
September 19, 2011
Hi there, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam remarks? If so how do you protect against it, any plugin or anything you can suggest? I get so much lately it's driving me insane so any support is very much appreciated.
September 30, 2011
You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.
October 9, 2011
I am very glad to see such information which I was searching for a long time.Keep publishing this type of informative post in the future too.
November 1, 2011
You completed some good points there. I did a search on the theme and found the majority of persons will have the same opinion with your blog.
цифровые фотоаппараты Sony
November 13, 2011
Thank you for the great information! I would not have discovered this otherwise!
November 21, 2011
When I originally commented I clicked the -Notify me when new surveys are added- checkbox and now when a comment is added I am four emails with the exact same comment. Is there any way you are able to get rid of me from that service? Thanks!
November 27, 2011
When I originally commented I clicked the -Notify me when new surveys are added- checkbox and now when a comment is added I am four emails with the exact same comment. Is there any way you are able to get rid of me from that service? Thanks!
buy google +1
November 27, 2011
I really enjoy this theme you've got going on in your web page. What is the name of the template by the way?
December 4, 2011
There are some interesting points in time in this article but I don't know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we want more! Added www.stevekwan.com to FeedBurner as well
December 14, 2011
You got a very great website www.stevekwan.com , Glad I noticed it through yahoo.
December 20, 2011
Just thought I'd drop you a line to tell you your www.stevekwan.com really rocks! I have been looking for this sort of information for a long time.. I don't usually reply to posts but I will in this case. WoW terrific great.

post comment

Required fields are marked with a *