Multi Column Text Without Tables

Discussion in 'HTML' started by Cibressus, Jul 11, 2007.

  1. Cibressus

    Cibressus Guest

    I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
    is stated that you should not use tables to format text. I understand
    this is because it separates data from formating, which can lead to
    adverse effects such as not being rendered properly on speech only
    browsers.

    If I should not use tables to split text into multiple columns, what
    should I use? What should I use if I need more flexibility?
     
    Cibressus, Jul 11, 2007
    #1
    1. Advertising

  2. Cibressus

    Nik Coughlin Guest

    Cibressus wrote:
    > I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
    > is stated that you should not use tables to format text. I understand
    > this is because it separates data from formating, which can lead to
    > adverse effects such as not being rendered properly on speech only
    > browsers.
    >
    > If I should not use tables to split text into multiple columns, what
    > should I use? What should I use if I need more flexibility?


    http://www.google.com/search?q=3 column layout
     
    Nik Coughlin, Jul 11, 2007
    #2
    1. Advertising

  3. Cibressus

    Brian Cryer Guest

    "Cibressus" <> wrote in message
    news:...
    >I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
    > is stated that you should not use tables to format text. I understand
    > this is because it separates data from formating, which can lead to
    > adverse effects such as not being rendered properly on speech only
    > browsers.
    >
    > If I should not use tables to split text into multiple columns, what
    > should I use? What should I use if I need more flexibility?


    The gist of it is to format each of your columns individually and then float
    one column against the next. So something like:

    <p style="width:20; float:left">Left column</p>
    <p>Body</p>

    In practise you'll probably want to apply those styles to divs and move the
    style defs into a separate style sheet. There are limitations and you'll no
    doubt find issues, but that's the general gist of it.

    To be honest though, and whilst I do mostly use this technique, there are
    still times when using a table for part of the layout is just so much
    easier.

    Hope this helps.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Jul 11, 2007
    #3
  4. Cibressus

    dorayme Guest

    In article <>,
    "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote:

    > To be honest though, and whilst I do mostly use this technique, there are
    > still times when using a table for part of the layout is just so much
    > easier.


    Meaning, I assume, that the basic skeleton be a table with 3
    cols. If you do only this and from there on do not use tables for
    layout, within the columns, it is no big crime and has much to
    recommend it in actual practice.

    --
    dorayme
     
    dorayme, Jul 11, 2007
    #4
  5. Brian Cryer wrote:
    <snip>

    > <p style="width:20; float:left">Left column</p>

    ^^^
    20 what?. A little correction here is that a length in this application
    unless 0 needs the units specified. "width: 20em;"



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 11, 2007
    #5
  6. Cibressus

    marss Guest

    Cibressus wrote:

    > If I should not use tables to split text into multiple columns, what
    > should I use? What should I use if I need more flexibility?


    Multi-columns layout by means of div no more than guru's freak. If you
    want columns then use an element that has columns.
    You can eat a soup using fork but spoon is more handy. :) IMHO.

    Mykola
    http://marss.co.ua
     
    marss, Jul 11, 2007
    #6
  7. Cibressus

    Brian Cryer Guest

    "Jonathan N. Little" <> wrote in message
    news:222c8$4694ca74$40cba7cb$...
    > Brian Cryer wrote:
    > <snip>
    >
    >> <p style="width:20; float:left">Left column</p>

    > ^^^
    > 20 what?. A little correction here is that a length in this application
    > unless 0 needs the units specified. "width: 20em;"


    Oops. Well spotted. I meant 20%, but 20em would be just as good - just not
    20px.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Jul 11, 2007
    #7
  8. Cibressus

    Brian Cryer Guest

    "dorayme" <> wrote in message
    news:...
    > In article <>,
    > "Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote:
    >
    >> To be honest though, and whilst I do mostly use this technique, there are
    >> still times when using a table for part of the layout is just so much
    >> easier.

    >
    > Meaning, I assume, that the basic skeleton be a table with 3
    > cols. If you do only this and from there on do not use tables for
    > layout, within the columns, it is no big crime and has much to
    > recommend it in actual practice.


    I still have some pages on my website that use a two column table for laying
    out the entire page. The disadvantage of using a table for controlling the
    page layout is that the browser won't render anything until it has read to
    the end of the table. This means that where the table is used to control the
    page layout that it won't render anything until it reads to the end of the
    page. So performance wise, its not a good idea. That said, I've not done
    empirical testing with Mozilla or IE 7 so there is scope for browsers being
    more intelligent and rendering sooner than they used to be.

    Whatever, I do agree that using tables is "no big crime and has much to
    recommend it in actual practice."

    Where I tend to use tables occasionally for layout now is where I want a few
    items lined up (for example in a 2 x 2 grid), and its just so easy in a
    table.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Jul 11, 2007
    #8
  9. Cibressus

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Wed, 11 Jul 2007 12:27:47 GMT
    marss scribed:

    >> If I should not use tables to split text into multiple columns, what
    >> should I use? What should I use if I need more flexibility?

    >
    > Multi-columns layout by means of div no more than guru's freak.


    Hardly. It is the standard. Don't denigrate the standard because you
    don't know it.

    --
    Neredbojias
    A self-made man who worships his creator
     
    Neredbojias, Jul 11, 2007
    #9
  10. Gazing into my crystal ball I observed marss <> writing
    in news::

    > You can eat a soup using fork but spoon is more handy.


    I like that analogy.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Jul 11, 2007
    #10
  11. Cibressus

    Nik Coughlin Guest

    marss wrote:
    > Cibressus wrote:
    >
    >> If I should not use tables to split text into multiple columns, what
    >> should I use? What should I use if I need more flexibility?

    >
    > Multi-columns layout by means of div no more than guru's freak. If you
    > want columns then use an element that has columns.
    > You can eat a soup using fork but spoon is more handy. :) IMHO.


    It's really, really easy to do columns without tables. Now, equal height
    columns on the other hand... can't be done without tables. Or css tables,
    but without IE support those are useless.
     
    Nik Coughlin, Jul 11, 2007
    #11
  12. Cibressus

    dorayme Guest

    In article <Xns996A7CF0AD883arbpenyahoocom@69.28.186.121>,
    Adrienne Boswell <> wrote:

    > Gazing into my crystal ball I observed marss <> writing
    > in news::
    >
    > > You can eat a soup using fork but spoon is more handy.

    >
    > I like that analogy.


    Not as apt as if he had used casserole. You can't eat soup with a
    fork. You can layout columns without a table. The truth is that
    it takes quite some skill and thought and fiddling about to get
    more than 2 col layouts to do all the things that the modern
    author can reasonably expect. 2 col layouts are generally a cinch
    with a float for left or right and so there is little reason in
    this case to begin such a layout with a table.

    Nearly all meals that do not require any cutting, are more
    sensibly eaten with a spoon rather than a knife and fork. It
    never ceases to amaze me that people even eat casseroles with a
    fork and I have seen folk actually cutting mainly the plate in a
    conditioned-response sort of a way when there is nothing that
    _needs_ cutting.

    --
    dorayme
     
    dorayme, Jul 11, 2007
    #12
  13. Cibressus

    Bergamot Guest

    Bergamot, Jul 12, 2007
    #13
  14. Cibressus

    Nik Coughlin Guest

    Bergamot wrote:
    > Nik Coughlin wrote:
    >>
    >> It's really, really easy to do columns without tables. Now, equal
    >> height columns on the other hand... can't be done without tables.

    >
    > Not true. It can be done fairly easily with creative use of borders
    > and negative margins.
    >
    > http://webhost.bridgew.edu/etribou/layouts/
    > http://www.bergamotus.ws/samples/3column-stretch-with-borders.html


    You're cheating, those are hacks that make it seem like you have equal
    height columns. You don't. But I should have been more specific, you can't
    do a fluid 3 column layout where the columns are rounded corner boxes
    implementing png transparency. Can't be done for Internet Explorer without
    using tables.

    I would love you to prove me wrong :)

    Here's my take on it (an older version, but defining the problem):
    http://www.nrkn.com/3ColRoundAlpha/

    And (a newer version, given up on equal height but a lot of dumb things I
    did in the first version have been fixed):
    http://www.nrkn.com/3ColRoundAlpha/new/

    The second is much nicer, but I haven't tried to make the columns equal this
    time as I don't think it can be done in a cross browser fashion without
    tables. Yes it has issues with IE<7 as you pointed out earlier :) But
    those can be fixed easily enough.
     
    Nik Coughlin, Jul 12, 2007
    #14
  15. Cibressus

    Bergamot Guest

    Bergamot, Jul 12, 2007
    #15
    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. Peter Bassett
    Replies:
    3
    Views:
    931
    Augustus
    Aug 15, 2003
  2. Greg Smith
    Replies:
    0
    Views:
    542
    Greg Smith
    Apr 12, 2007
  3. Larry R
    Replies:
    1
    Views:
    386
    marss
    Jun 8, 2007
  4. hansiman

    Image in header column (not replacing column header text)

    hansiman, Feb 5, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    311
    hansiman
    Feb 7, 2004
  5. Philip Nelson

    RoR : Linking tables without ID column

    Philip Nelson, Sep 25, 2006, in forum: Ruby
    Replies:
    0
    Views:
    159
    Philip Nelson
    Sep 25, 2006
Loading...

Share This Page