Converting a site using <table> to <div>

There's no real important reason behind me wanting to convert my web
site to XHTML, other than I see it as a challenge.

My web site relies heavily on the use of <table>'s and I'm really just
curious as to whether someone thinks it would be possible for me to
update my site to use <div>'s instead and it not turn out any more
messy than what it currently is with the tables.

http://www.commanderbond.net

Dave Winter

Dave Winter wrote:
> There's no real important reason behind me wanting to convert my web
> site to XHTML, other than I see it as a challenge.

Distinguish between converting to XHTML and converting to CSS-positioning
techniques. They are *totally* different concepts. I would suggest you target
on valid HTML 4.01 Strict & valid CSS, and forget XHTML until you have a
*real* need. (You can use table-layout in XHTML, or tableless-layout in HTML).

(If you want a challenge, try to find a cure for global warming).

> My web site relies heavily on the use of <table>'s and I'm really just
> curious as to whether someone thinks it would be possible for me to
> update my site to use <div>'s instead and it not turn out any more
> messy than what it currently is with the tables.
> http://www.commanderbond.net

I think it would be easy enough to update your site not to use table-layout.
If you need to ask the question, you need to learn quite a bit in order to do
this. But you could do so. (Don't just think "<div>". CSS can position all
sorts of elements, and sometimes you just don't need a <div>).

There are a number of separate stages that you could choose. Here are just a
few:

1. The site is very "controlling", using tables. It is a classic "5-box
3-column" layout, and you could use a very simple layout table to position
those 5 boxes, and do everything else using CSS. Strip out all attributes
except ID & CLASS attributes, then do the rest with CSS. You probably don't
need anything more in the HTML than:

<table id="layout">
<tr>
<td colspan="3" id="banner">Banner here</td>
</tr>
<tr>
<td id="leftbar">Leftbar here</td>
<td id="middlebar">Middlebar here</td>
<td id="rightbar">Rightbar here</td>
</tr>
<tr>
<td colspan="3" id="footer">Footer here</td>
</tr>
</table>

See the following for 15 ways of doing this sort of layout:
"Variations on the 5-box 3-column layout"
http://www.barry.pearson.name/articles/layout_5_3/

2. Since normal flow can put stuff below other stuff, sometimes the only
advantage from a table is to provide columns easily. So another stage might be
the following. (I expect you would find it useful to wrap the whole lot in
another id="wrapper" <div>).

<div id="banner">Banner here</div>
<table id="layout">
<tr>
<td id="leftbar">Leftbar here</td>
<td id="middlebar">Middlebar here</td>
<td id="rightbar">Rightbar here</td>
</tr>
</table>
<div id="footer">Footer here</div>

3. You have stuff in your middle column that I think is good use of a 2-column
table. Even if you turn the entire page-layout to use CSS-positioning, I would
still suggest you retain the table in that column. If you choose not to, be
careful to wrap up each row (photo & text) as though it is a table row. It
will make it easier to use positioning or floating to regain the effect that
is so easy with a table. For example:

<div class="itemrow">
<img class="photo" ....>
<div class="accompanyingtext">Brosnam...</div>
</div>

This would make it easier to achieve the rows, although you would need some
way of "clearing" the above. See:
http://www.complexspiral.com/publica...aining-floats/

4. Another stage is simply to re-think your entire design concept. I see
little point in trying to change <td>...</td> to <div...</div> without making
another significant advance at the same time. If you are happy (and I actually
like your concept!) then whatever you do, do it as a learning exercise. No one
is being harmed by your site.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Dave Winter <> wrote:

>There's no real important reason behind me wanting to convert my web
>site to XHTML, other than I see it as a challenge.

Bad challenge, better convert to the HTML 4.01 Strict doctype.

Another worthy challenge, reduce the load time for your index page, it's
currently approx 0.5mB, way to much.

>My web site relies heavily on the use of <table>'s and I'm really just
>curious as to whether someone thinks it would be possible for me to
>update my site to use <div>'s instead and it not turn out any more
>messy than what it currently is with the tables.

Also a worthy challenge, but save that until last, it will take you
considerable effort to learn how.

--
Spartanicus

Barry Pearson wrote:

> <table id="layout">
> <tr>
> <td colspan="3" id="banner">Banner here</td>
> </tr>
> <tr>
> <td id="leftbar">Leftbar here</td>
> <td id="middlebar">Middlebar here</td>
> <td id="rightbar">Rightbar here</td>
> </tr>
> <tr>
> <td colspan="3" id="footer">Footer here</td>
> </tr>
> </table>

By the way, a nice hack for those using tables... assuming that the middle
bar is where the main content lives and the side bars are used for various
navigation stuff:

<table id="layout" summary="">
<tr>
<td colspan="3" id="banner">Banner here</td>
</tr>
<tr>
<td style="height:1px"></td>
<td id="middlebar" rowspan="2">Middlebar here</td>
<td></td>
</tr>
<tr>
<td id="leftbar">Leftbar here</td>
<td id="rightbar">Rightbar here</td>
</tr>
<tr>
<td colspan="3" id="footer">Footer here</td>
</tr>
</table>

Now when someone comes along with a non-table browser they see:

Heading
Content
Navigation 1
Navigation 2
Footer

Which is arguably the most sensible linear arrangement of information.

By the way, use summary="" on layout tables, just like you use alt="" on
decorational images.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

On Wed, 7 Apr 2004 16:53:27 +0100, Dave Winter <>
wrote:

>There's no real important reason behind me wanting to convert my web
>site to XHTML, other than I see it as a challenge.

You've got a big complex site. It's the sort of site that's likely to
benefit from some thoughts towards a CMS (Content Management System).
These days that usually implies XML and XSLT (and with good reason)
and although they don;t much mind whether their output is XHTML or
HTML, there's a useful benefit to authoring the fragments in XHTML and
keeping to the same approach throughout.


>My web site relies heavily on the use of <table>'s and I'm really just
>curious as to whether someone thinks it would be possible for me to
>update my site to use <div>'s instead

For the big 5 columns, I'd stick with tables. <div> sucks for this
sort of layout.

There are good tables and bad tables. Bad tables are those (amongst
others) 3x3 tables used for borders, or to place whitespace between
columns. They're bad because they're superfluous, and mainly because
they're verbose. Heavy nesting also becomes a maintenance headache.

A "set of columns" table is not bogus like this (each column has
meaning) and it's not verbose (there's only one). It's not strictly
"tabular", granted, but the practical downsides of it are minimal.

I'm not trying to justify the use of tables for columns at a semantic
level. But they do work (so do the truly bogus tables, it has to be
said), they don't have the clear disadvantages of the "everything a
table" approach, and they don't have the problems of <div>s


Go for Transitional rather than Strict, for either HTML 4.01 or XHTML
1.0. Strict offers no benefit over Transitional, and you keep target.

--
Smert' spamionam

Toby A Inkster wrote:
> Barry Pearson wrote:
[snip]
> By the way, a nice hack for those using tables... assuming that the
> middle bar is where the main content lives and the side bars are used
> for various navigation stuff:
[snip]

Indeed - aka "the table trick". Originally devised for SEO, I believe, but now
used for other linearisation purposes.

[snip]
> By the way, use summary="" on layout tables, just like you use alt=""
> on decorational images.

Yes or no? I once systematically did this in response to "Bobby" reports on my
pages.

But then I read this extract:

Tables for layout
What not to do
Absolutely none of the accessibility tags used in data tables may be used in
layout tables. Technically, even summary="" is against the spec, but harmless.
http://joeclark.org/book/sashay/seri...Chapter10.html

I couldn't find how he came to the conclusion that it was "against the spec".
It would be against the WAI guidelines if "summary" were structural mark-up,
which must not be used in layout tables. But is it?
http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout

I've also seen instructions (probably not on the W3C site) saying the layout
tables should have summary="layout" as an explicit indication! I assume this
is *not* "officially" recommended.

There appears to be confusion at WAI that I haven't resolved yet: "if we
publish one document, what about contradictory techniques between 1.0 and 2.0?
e.g., in 1.0 "all tables must have summary" in 2.0 "only data tables may have
summary, layout tables should have null summary". But that may be just
ambiguous English - a null summary appears not to be a counted as a summary,
but should be provided anyway.
http://www.w3.org/WAI/GL/2004/02/04-minutes.html

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Andy Dingley wrote:
> On Wed, 7 Apr 2004 16:53:27 +0100, Dave Winter <>
> wrote:
[snip]
>>My web site relies heavily on the use of <table>'s and I'm really just
>>curious as to whether someone thinks it would be possible for me to
>>update my site to use <div>'s instead
[snip]
> I'm not trying to justify the use of tables for columns at a semantic
> level. But they do work (so do the truly bogus tables, it has to be
> said), they don't have the clear disadvantages of the "everything a
> table" approach, and they don't have the problems of <div>s
[snip]

I felt that this would be easier than many to make tableless, for a specific
reason. (Although that reason would disappear if the design changed).

Although it is arranged as columns, it doesn't (currently) rely on specific
features of columns, such as border & background colour. (OK, there is one
vertical inner-border). These cause many people problems with tableless
layouts, because CSS has boxes, not columns (yet), and a lot of anguish goes
into getting borders and backgrounds to go right down to the footer.
Especially if they vary from one column to another, and/or the relative
heights of the various columns isn't predictable.

These problems can normally be solved, and have been in some attractive
layouts, but they tend to need a lot of attention to be paid to getting the
wrapping right in the HTML so that boxes serve as columns. I've seen layouts
where background colours in the left & right sidebars have been implemented in
totally different ways, for example, one as a page-level background image, the
other as a box-level background colour. Whereas with a simple table,
same-height cells in a row come for free.

Hm! I suppose I'm saying "if you go tableless, you may find you've cut off
some of your presentation options unless you take care of the wrapping &
nesting of the elements".

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/