Transitioning from a DIV to Table-based layout. On purpose.
I’ve been working on a site that uses a App-model style layout;
3 columns, like an Email client.
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.
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?
There are few traditional arguments that are given against tables:
- HTML should be semantic
- Screen Readers can’t handle Tables
- CSS lets you just change the one CSS file, rather than every page
- Table Layouts are only used by people who can’t do divs properly
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">
<!– Actual page content here –>
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.
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.
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.
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.