Skip to content

February 12, 2013

1

Transitioning from a DIV to Table-based layout. On purpose.

by e1ven

I’ve been working on a site that uses a App-model style layout;

3 columns, like an Email client.

Screen

It works using Divs laid out with CSS, and generally works really well.

It even loads well on older version of Netscape, properly degrading to run, even if it’s not as pretty.
NS4

The more I look at it, though, the more I wonder if there is more I could do.
If dropping support for ancient browsers is really necessary at all.

Given that it’s a simple 3 column site, my initial thought was to experiment with frames. While these work, dataURI+frames aren’t as well supported as I’d like, and the experience of frames on lynx is not ideal.

What about Tables?

Tables have gotten a bad rap in recent years.
It is generally recommended that we avoid tables, and use divs for layout. But why?

There are few traditional arguments that are given against tables:

  • HTML should be semantic
  • It’s often argued that HTML should be semantic where possible, and to split the presentation (CSS) from the layout (HTML). In practice, however, this often doesn’t work out. To make various tricks work right, developers are often creating a wide variety of presentational divs anyway, for wrappers and other non-semantic content.

    <div class="region region-content">
    <div id="block-system-main" class="block block-system">
    <div class="content">
    <!– Actual page content here –>
    </div>
    </div>
    </div>

    You could certainly argue that we’re moving in a more semantic direction, and HTML5 certainly moves in that direction, but we’re still a long way away from there.
    Combine that with other work arounds that are being done to support non-performant browsers

    [if IE 6]>

    and it’s hard to justify that a simple table is much worse.

  • Screen Readers can’t handle Tables
  • Modern screen readers are actually fairly decently at handling tables. They’ve improved in the last 10 years since we started using CSS.

    Additionally, you can mark a table as presentational, so that it can be interpreted as such using role=”presentation”.

    JAWS, WindowEyes, and NVDA will all do the right thing.

  • CSS lets you just change the one CSS file, rather than every page
  • If I were manually editing 100s of files, this might be a valid concern – But like many modern developers, I’m writing web applications designed to run with a templating system – Python, Ruby, even PHP have libraries which make this trivial. I can change my structure in a single location, and have it automatically apply on every pageload.

  • Table Layouts are only used by people who can’t do divs properly
  • I can sympathize with this view- There’s a lot of people who get stuck in CSS land, and resort to a “Screw it, I’ll use a table” attitude, so I can see where it comes from. But Google and Twitter are using tables as part of their layouts, and I’m sure they have someone there who knows what they’re doing 😉
    In my case, I have the layout working properly in CSS, but I’m deliberately redoing it, spending extra time, to gain the broad-compatibility that a table-based layout brings.
    Some things are easier, some things are harder, but it’s a valid choice in designing a site.

But CSS is really useful!

It sure is!
And I’m in favor of using CSS, all over the place!
Gradients are better than images, rotation is amazing, and changing elements through properties is useful.
CSS has it’s warts (Templating would be nice..), but it’s a great way to explain how elements should look. And divs are often useful for layout, too.
But non-tabular use of a tables is probably OK, as part of a well-balanced breakfast.

Advertisements
Read more from Uncategorized
1 Comment Post a comment
  1. rowleyaj
    Feb 19 2013

    “Google and Twitter are using tables as part of their layouts, and I’m sure they have someone there who knows what they’re doing” Where do you refer to? Just curious.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: