convert a table to a <div> controlled layout

Discussion in 'HTML' started by Phper, May 19, 2008.

  1. Phper

    Phper Guest

    How to convert the common html table code below
    <table align="center">
    <tr>
    <td> 1.1 &nbsp;&nbsp; </td>
    <td> 1.2 &nbsp; &nbsp; </td>
    <td> 1.3 &nbsp;&nbsp;
    </td>
    </tr>
    <tr>
    <td> 2.1 &nbsp;&nbsp; </td>
    <td> 2.2 &nbsp; &nbsp; </td>
    <td> 2.3 &nbsp; &nbsp; </td>
    </tr>
    <tr>
    <td> 3.1 &nbsp;&nbsp; </td>
    <td> 3.2 &nbsp; &nbsp; </td>
    <td> 3.3 &nbsp; &nbsp; </td>
    </tr>

    </table>

    to a <div> controlled layout using css?
     
    Phper, May 19, 2008
    #1
    1. Advertising

  2. Scripsit Phper:

    > How to convert the common html table code below

    - -
    > to a <div> controlled layout using css?


    Is this an exercise on a course? You're then supposed to do it yourself
    to learn things. If you can't, your instructor should explain the
    solution after you've tried hard.

    It looks very much like an exercise, since no URL was given and the data
    does not contain realistic data. It actually looks much like a tabular
    data structure, so it would be a _poor_ exercise. In that case, the best
    answer - though perhaps not the one that will be _judged_ best - would
    explain both why it is wrong to do such a conversion and why it will
    fail due to lack of browser support to the adequate way of creating real
    and flexible tabulation in CSS.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 19, 2008
    #2
    1. Advertising

  3. Phper

    richard Guest

    On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
    <> wrote:

    >How to convert the common html table code below
    ><table align="center">
    ><tr>
    ><td> 1.1 &nbsp;&nbsp; </td>
    ><td> 1.2 &nbsp; &nbsp; </td>
    ><td> 1.3 &nbsp;&nbsp;
    > </td>
    ></tr>
    ><tr>
    ><td> 2.1 &nbsp;&nbsp; </td>
    ><td> 2.2 &nbsp; &nbsp; </td>
    ><td> 2.3 &nbsp; &nbsp; </td>
    ></tr>
    ><tr>
    ><td> 3.1 &nbsp;&nbsp; </td>
    ><td> 3.2 &nbsp; &nbsp; </td>
    ><td> 3.3 &nbsp; &nbsp; </td>
    ></tr>
    >
    ></table>
    >
    >to a <div> controlled layout using css?



    Simple. Each table cell equals a division.
    So instead of seeing <table><tr><td>abc</td></tr></table>
    you would see <div>abc</div>.

    Give each cell a class name and use css to define it's
    characteristics. For this excercise you will need to learn about
    "float", "margin" and "padding".

    IMHO, use of &nbsp sucks. I'd prefer to define a width of the cell,
    then center the contents. Or if I wanted to align them to the left or
    right, use padding.
     
    richard, May 19, 2008
    #3
  4. Phper

    richard Guest

    On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
    <> wrote:

    >How to convert the common html table code below
    ><table align="center">
    ><tr>
    ><td> 1.1 &nbsp;&nbsp; </td>
    ><td> 1.2 &nbsp; &nbsp; </td>
    ><td> 1.3 &nbsp;&nbsp;
    > </td>
    ></tr>
    ><tr>
    ><td> 2.1 &nbsp;&nbsp; </td>
    ><td> 2.2 &nbsp; &nbsp; </td>
    ><td> 2.3 &nbsp; &nbsp; </td>
    ></tr>
    ><tr>
    ><td> 3.1 &nbsp;&nbsp; </td>
    ><td> 3.2 &nbsp; &nbsp; </td>
    ><td> 3.3 &nbsp; &nbsp; </td>
    ></tr>
    >
    ></table>
    >
    >to a <div> controlled layout using css?



    Just for kicks I converted your table to divisions here
    http://1littleworld.com/table101.html
    purely as an attempt to show you one possible way of doing it.
     
    richard, May 19, 2008
    #4
  5. On May 19, 12:39 pm, richard <> wrote:

    > Just for kicks I converted your table to divisions herehttp://1littleworld.com/table101.html
    > purely as an attempt to show you one possible way of doing it.


    While I do not disagree with your advice (or Jukka's), Just for kicks
    I wanted to see how much more work it was to make the div version....

    Just the code to make thge table or the divs:
    166 keystrokes for the table version
    372 for the div version. (687 if you count the style, but that would
    be an unfair comparison as the table has no style...)

    Hey, don't read anything into this, I just had some free time on my
    hands....
     
    Travis Newbury, May 19, 2008
    #5
  6. Scripsit Travis Newbury:

    > On May 19, 12:39 pm, richard <> wrote:
    >
    >> Just for kicks I converted your table to divisions
    >> herehttp://1littleworld.com/table101.html purely as an attempt to
    >> show you one possible way of doing it.

    >
    > While I do not disagree with your advice


    You should.

    > (or Jukka's),


    I agree with your refusal to disagree with my advice, because it was
    correct.

    > Just for kicks
    > I wanted to see how much more work it was to make the div version....


    I hope you enjoyed it, but it's really not relevant. The relevant thing
    is that you can't turn <div> soup into something that is "the same" as a
    simple HTML table. You could simulate it by using _fixed-width_ <div>s,
    but this would destroy much of the table idea.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 19, 2008
    #6
  7. Phper

    richard Guest

    On Mon, 19 May 2008 10:56:04 -0700 (PDT), Travis Newbury
    <> wrote:

    >On May 19, 12:39 pm, richard <> wrote:
    >
    >> Just for kicks I converted your table to divisions herehttp://1littleworld.com/table101.html
    >> purely as an attempt to show you one possible way of doing it.

    >
    >While I do not disagree with your advice (or Jukka's), Just for kicks
    >I wanted to see how much more work it was to make the div version....
    >
    >Just the code to make thge table or the divs:
    >166 keystrokes for the table version
    >372 for the div version. (687 if you count the style, but that would
    >be an unfair comparison as the table has no style...)
    >
    >Hey, don't read anything into this, I just had some free time on my
    >hands....



    ahhh geee thanks man. I needed that.
     
    richard, May 19, 2008
    #7
  8. Phper

    richard Guest

    On Mon, 19 May 2008 22:27:43 +0300, "Jukka K. Korpela"
    <> wrote:

    >Scripsit Travis Newbury:
    >
    >> On May 19, 12:39 pm, richard <> wrote:
    >>
    >>> Just for kicks I converted your table to divisions
    >>> herehttp://1littleworld.com/table101.html purely as an attempt to
    >>> show you one possible way of doing it.

    >>
    >> While I do not disagree with your advice

    >
    >You should.
    >
    >> (or Jukka's),

    >
    >I agree with your refusal to disagree with my advice, because it was
    >correct.
    >
    >> Just for kicks
    >> I wanted to see how much more work it was to make the div version....

    >
    >I hope you enjoyed it, but it's really not relevant. The relevant thing
    >is that you can't turn <div> soup into something that is "the same" as a
    >simple HTML table. You could simulate it by using _fixed-width_ <div>s,
    >but this would destroy much of the table idea.



    Do note, I said this was only one possiblity.
    The excercise was what one needs to do to make it work.
    Not that it was 100% correct by any means.
     
    richard, May 19, 2008
    #8
  9. Phper

    dorayme Guest

    In article
    <>,
    Travis Newbury <> wrote:

    > On May 19, 12:39 pm, richard <> wrote:
    >
    > > Just for kicks I converted your table to divisions
    > > herehttp://1littleworld.com/table101.html
    > > purely as an attempt to show you one possible way of doing it.

    >
    > While I do not disagree with your advice (or Jukka's), Just for kicks
    > I wanted to see how much more work it was to make the div version....
    >
    > Just the code to make thge table or the divs:
    > 166 keystrokes for the table version
    > 372 for the div version. (687 if you count the style, but that would
    > be an unfair comparison as the table has no style...)


    It would not be an unfair comparison for the following reason:

    Now and then, you just might have heard me talking about the magic of
    tables. This is me saying tables do a lot of things for the author. The
    technology comes to the party offering a great deal of cleverness. The
    cleverness is built into it.

    Much of the visual formatting is automatically contributed by the most
    elementary use of the table. The author need not even concern himself
    with widths or heights. His only absolutely essential job is to enter
    related information into rows and columns. The widths and heights and
    regular horizontal and vertical patterning and fluid behaviour on a
    webpage will follow automatically.

    In other words, to put it crudely, there is a lot of "looks" that are
    contributed by tables rather than by the strenuous efforts of authors.
    Put another way, authors do not have to be such control freaks with
    tables as they do with other ways of presenting tabular data. And no
    wonder. Tables were designed in the first place to handle such data.

    To try to mimic this magic or inbuilt fluidity using other methods not
    made for the purpose is obviously going to require more effort. So, you
    are not wrong and your comparison is not unfair.

    I suppose I better add that this is a defence of you. And that it has
    nothing at all to do with tables as mere layout.

    >
    > Hey, don't read anything into this, I just had some free time on my
    > hands....


    --
    dorayme
     
    dorayme, May 19, 2008
    #9
  10. Phper

    dorayme Guest

    In article <twkYj.3490$>,
    "Jukka K. Korpela" <> wrote:

    > Scripsit Travis Newbury:
    >
    > > On May 19, 12:39 pm, richard <> wrote:
    > >
    > >> Just for kicks I converted your table to divisions
    > >> herehttp://1littleworld.com/table101.html purely as an attempt to
    > >> show you one possible way of doing it.

    > >

    ....

    > I hope you enjoyed it, but it's really not relevant. The relevant thing
    > is that you can't turn <div> soup into something that is "the same" as a
    > simple HTML table. You could simulate it by using _fixed-width_ <div>s,
    > but this would destroy much of the table idea.


    Absolutely typical misunderstanding of what a fellow human is saying!

    --
    dorayme
     
    dorayme, May 19, 2008
    #10
  11. Phper

    dorayme Guest

    In article <>,
    richard <> wrote:

    > Just for kicks I converted your table to divisions here
    > http://1littleworld.com/table101.html
    > purely as an attempt to show you one possible way of doing it.


    It sure does not look the same to me.

    --
    dorayme
     
    dorayme, May 19, 2008
    #11
  12. On May 19, 3:27 pm, "Jukka K. Korpela" <> wrote:
    > I hope you enjoyed it, but it's really not relevant.


    Much in this life is not relevant. I enjoy most of it...
     
    Travis Newbury, May 19, 2008
    #12
  13. On May 19, 5:59 pm, dorayme <> wrote:
    > I suppose I better add that this is a defence of you. And that it has
    > nothing at all to do with tables as mere layout.
    > > Hey, don't read anything into this, I just had some free time on my
    > > hands....



    Apparently we both have some free time...
     
    Travis Newbury, May 19, 2008
    #13
  14. Phper

    dorayme Guest

    In article
    <>,
    Travis Newbury <> wrote:

    > On May 19, 5:59 pm, dorayme <> wrote:
    > > I suppose I better add that this is a defence of you. And that it has
    > > nothing at all to do with tables as mere layout.
    > > > Hey, don't read anything into this, I just had some free time on my
    > > > hands....

    >
    >
    > Apparently we both have some free time...


    It's a shame you laugh off your intuitions this way...

    --
    dorayme
     
    dorayme, May 19, 2008
    #14
  15. Phper

    richard Guest

    On Tue, 20 May 2008 07:59:53 +1000, dorayme
    <> wrote:

    >In article
    ><>,
    > Travis Newbury <> wrote:
    >
    >> On May 19, 12:39 pm, richard <> wrote:
    >>
    >> > Just for kicks I converted your table to divisions
    >> > herehttp://1littleworld.com/table101.html
    >> > purely as an attempt to show you one possible way of doing it.

    >>
    >> While I do not disagree with your advice (or Jukka's), Just for kicks
    >> I wanted to see how much more work it was to make the div version....
    >>
    >> Just the code to make thge table or the divs:
    >> 166 keystrokes for the table version
    >> 372 for the div version. (687 if you count the style, but that would
    >> be an unfair comparison as the table has no style...)

    >
    >It would not be an unfair comparison for the following reason:
    >
    >Now and then, you just might have heard me talking about the magic of
    >tables. This is me saying tables do a lot of things for the author. The
    >technology comes to the party offering a great deal of cleverness. The
    >cleverness is built into it.
    >
    >Much of the visual formatting is automatically contributed by the most
    >elementary use of the table. The author need not even concern himself
    >with widths or heights. His only absolutely essential job is to enter
    >related information into rows and columns. The widths and heights and
    >regular horizontal and vertical patterning and fluid behaviour on a
    >webpage will follow automatically.
    >
    >In other words, to put it crudely, there is a lot of "looks" that are
    >contributed by tables rather than by the strenuous efforts of authors.
    >Put another way, authors do not have to be such control freaks with
    >tables as they do with other ways of presenting tabular data. And no
    >wonder. Tables were designed in the first place to handle such data.
    >
    >To try to mimic this magic or inbuilt fluidity using other methods not
    >made for the purpose is obviously going to require more effort. So, you
    >are not wrong and your comparison is not unfair.
    >
    >I suppose I better add that this is a defence of you. And that it has
    >nothing at all to do with tables as mere layout.
    >
    >>
    >> Hey, don't read anything into this, I just had some free time on my
    >> hands....



    Which came first?
    Tables. No CSS in the beginning. So html was originally formatted
    using tables. Practically every site used them for presentation, from
    download.com to microsoft.com. CSS comes along and offers an
    alternative method of display and presentation.

    I say it's a copout to insist that "tables are for tabular data".

    In some cases, outside of tabular data, it may be more prudent to use
    tables rather than divisions. Simply for the way tables function.
     
    richard, May 20, 2008
    #15
  16. Phper

    dorayme Guest

    In article <>,
    richard <> wrote:

    > On Tue, 20 May 2008 07:59:53 +1000, dorayme
    > <> wrote:
    >
    > >
    > >Much of the visual formatting [of tables] is automatically contributed by the most
    > >[the table technology]. The author need not even concern himself
    > >with widths or heights. His only absolutely essential job is to enter
    > >related information into rows and columns. The widths and heights and
    > >regular horizontal and vertical patterning and fluid behaviour on a
    > >webpage will follow automatically.
    > >
    > >In other words, to put it crudely, there is a lot of "looks" that are
    > >contributed by tables rather than by the strenuous efforts of authors.
    > >Put another way, authors do not have to be such control freaks with
    > >tables as they do with other ways of presenting tabular data. And no
    > >wonder. Tables were designed in the first place to handle such data.
    > >
    > >To try to mimic this magic or inbuilt fluidity using other methods not
    > >made for the purpose is obviously going to require more effort...
    > >
    > >I suppose I better add that this ... has
    > >nothing at all to do with tables as mere layout.
    > >

    >
    > Which came first?
    > Tables. No CSS in the beginning. So html was originally formatted
    > using tables.


    > Practically every site used them for presentation, from
    > download.com to microsoft.com. CSS comes along and offers an
    > alternative method of display and presentation.
    >
    > I say it's a copout to insist that "tables are for tabular data".
    >


    You would be more convincing if you showed you understood why it is that
    knowledgeable and intelligent people have moved away from tables for
    layout.

    --
    dorayme
     
    dorayme, May 20, 2008
    #16
  17. Phper

    Nik Coughlin Guest

    "Phper" <> wrote in message
    news:...
    > How to convert the common html table code below
    > <table align="center">
    > <tr>
    > <td> 1.1 &nbsp;&nbsp; </td>
    > <td> 1.2 &nbsp; &nbsp; </td>
    > <td> 1.3 &nbsp;&nbsp;
    > </td>
    > </tr>
    > <tr>
    > <td> 2.1 &nbsp;&nbsp; </td>
    > <td> 2.2 &nbsp; &nbsp; </td>
    > <td> 2.3 &nbsp; &nbsp; </td>
    > </tr>
    > <tr>
    > <td> 3.1 &nbsp;&nbsp; </td>
    > <td> 3.2 &nbsp; &nbsp; </td>
    > <td> 3.3 &nbsp; &nbsp; </td>
    > </tr>
    >
    > </table>
    >
    > to a <div> controlled layout using css?


    http://nrkn.com/temp/phper.html
     
    Nik Coughlin, May 20, 2008
    #17
  18. Gazing into my crystal ball I observed dorayme
    <> writing in news:doraymeRidThis-
    :

    >> Which came first?
    >> Tables. No CSS in the beginning. So html was originally formatted
    >> using tables.

    >


    No, HTML was not originally formatted with tables. In the beginning there
    was no table element [http://www.w3.org/MarkUp/html-spec/L2index.html -
    HTML 2.0]. The HTML 3.0, they were introduced with the caveat that they
    could cause problems with speech or text only UAs.

    Stylesheets became a recommendation in December of 1996. HTML 3.0, which
    introduced tables, became a recommendation in January of 1997.


    --
    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, May 20, 2008
    #18
  19. Phper

    dorayme Guest

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

    > >> Which came first?
    > >> Tables. No CSS in the beginning. So html was originally formatted
    > >> using tables.

    > >

    >


    No, HTML was not originally formatted with tables. In the beginning
    there was no table element
    [http://www.w3.org/MarkUp/html-spec/L2index.html -
    HTML 2.0]. The HTML 3.0, they were introduced with the caveat that they
    could cause problems with speech or text only UAs.

    Stylesheets became a recommendation in December of 1996. HTML 3.0,
    which introduced tables, became a recommendation in January of 1997.

    --
    dorayme
     
    dorayme, May 20, 2008
    #19
  20. Phper

    Andy Dingley Guest

    On 19 May, 14:39, Phper <> wrote:
    > How to convert the common html table code below

    [...]
    > to a <div> controlled layout using css?


    Leave it as a <table>. From all we can tell from your post, it's
    entirely appropriate for this table to be a <table>.

    There are many "<div> based" layouts that could be used here. Choosing
    the most appropriate would require more background knowledge of the
    problem than you have given us. In the absence of such information,
    <table> is the best choice.

    If your course tutor has just reached the "ALL tables are bad" stage
    of CSS coding, then find a more up to date course.
     
    Andy Dingley, May 20, 2008
    #20
    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. Rick Spiewak
    Replies:
    3
    Views:
    3,196
    Rick Spiewak
    Aug 26, 2003
  2. Eric
    Replies:
    4
    Views:
    757
    clintonG
    Dec 24, 2004
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,039
  4. Replies:
    1
    Views:
    621
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,038
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page