Converting a site using <table> to <div>

Discussion in 'HTML' started by Dave Winter, Apr 7, 2004.

  1. Dave Winter

    Dave Winter Guest

    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, Apr 7, 2004
    #1
    1. Advertising

  2. 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/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.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
     
    Barry Pearson, Apr 7, 2004
    #2
    1. Advertising

  3. Dave Winter

    Spartanicus Guest

    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
     
    Spartanicus, Apr 7, 2004
    #3
  4. 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
     
    Toby A Inkster, Apr 7, 2004
    #4
  5. Dave Winter

    Andy Dingley Guest

    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
     
    Andy Dingley, Apr 8, 2004
    #5
  6. 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/serialization/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/
     
    Barry Pearson, Apr 8, 2004
    #6
  7. 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/
     
    Barry Pearson, Apr 8, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bill McCormick

    Converting from table to div

    Bill McCormick, Aug 19, 2005, in forum: HTML
    Replies:
    0
    Views:
    427
    Bill McCormick
    Aug 19, 2005
  2. Thierry Lam
    Replies:
    23
    Views:
    1,072
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    814
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    245
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    362
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page