Dave said:
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/publications/containing-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.
