Re: Replacing tables with divs

Discussion in 'HTML' started by Jukka K. Korpela, Mar 8, 2012.

  1. 2012-03-08 1:18, Alfred Molon wrote:

    > There is probably a simple answer to this, but for some reason I haven't
    > figured it out yet.


    There's a simple answer, but many people refuse to accept it.

    > 1. How do I replace a table with three columns with an equivalent div-
    > based code?
    >
    > From:
    > <table>
    > <tr><td></td><td></td><td></td></tr>
    > </table>
    >
    > to:
    > <div>
    > <div id="div1"></div><div id="div2"></div><div id="div3"></div>
    > </div>


    You need to add an id attribute or a class attribute to the outermost
    <div> or otherwise make it possible to refer to it in CSS. Let's suppose
    you use <div class="one-row-table>. Then you use the following stylesheet:

    ..one-row-table {
    display: table;
    border-spacing: 2px;
    }
    ..one-row-table > div {
    display: table-cell;
    padding: 1px;
    }

    This is the only way. Other answers are based on misconceptions: they
    may mimic some features of an HTML table some of the time, but adequate
    testing shows rather fast that it's still different from a table.

    On browsers that do not support display: table and relatives, such as IE
    7, the div elements appear as blocks that each occupy the available
    width, of course. For such browsers, the simple answer to the question
    is "You don't". (You could mimic some features of a table, but that's a
    different issue.)

    > 2. Same question for a table with three rows:


    Obvious modifications are needed, using display: table-row for any div
    element to be rendered as a table row.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 8, 2012
    #1
    1. Advertising

  2. Jukka K. Korpela

    richard Guest

    On Thu, 08 Mar 2012 08:27:15 +0200, Jukka K. Korpela wrote:

    > 2012-03-08 1:18, Alfred Molon wrote:
    >
    >> There is probably a simple answer to this, but for some reason I haven't
    >> figured it out yet.

    >
    > There's a simple answer, but many people refuse to accept it.
    >
    >> 1. How do I replace a table with three columns with an equivalent div-
    >> based code?
    >>
    >> From:
    >> <table>
    >> <tr><td></td><td></td><td></td></tr>
    >> </table>
    >>
    >> to:
    >> <div>
    >> <div id="div1"></div><div id="div2"></div><div id="div3"></div>
    >> </div>

    >
    > You need to add an id attribute or a class attribute to the outermost
    > <div> or otherwise make it possible to refer to it in CSS. Let's suppose
    > you use <div class="one-row-table>. Then you use the following stylesheet:
    >
    > .one-row-table {
    > display: table;
    > border-spacing: 2px;
    > }
    > .one-row-table > div {
    > display: table-cell;
    > padding: 1px;
    > }
    >
    > This is the only way. Other answers are based on misconceptions: they
    > may mimic some features of an HTML table some of the time, but adequate
    > testing shows rather fast that it's still different from a table.
    >
    > On browsers that do not support display: table and relatives, such as IE
    > 7, the div elements appear as blocks that each occupy the available
    > width, of course. For such browsers, the simple answer to the question
    > is "You don't". (You could mimic some features of a table, but that's a
    > different issue.)
    >
    >> 2. Same question for a table with three rows:

    >
    > Obvious modifications are needed, using display: table-row for any div
    > element to be rendered as a table row.


    Why would I use CSS to tell a table cell to display as a table cell when
    that is what is by nature?

    Your attitude sucks. "Do it my way or no way".

    There are 20 guys doing "jumping jacks" all in a line.
    One guy has his hands down to the ground, while the others all have their
    hands up in the air, and he asks,
    "Why can't you guys get with the program?"
    That one guy would be you.
     
    richard, Mar 8, 2012
    #2
    1. Advertising

  3. richard the sto0pid dumbass wrote:

    > Jukka K. Korpela wrote:
    >> Alfred Molon wrote:
    >>> There is probably a simple answer to this, but for some reason I
    >>> haven't figured it out yet.

    >>
    >> There's a simple answer, but many people refuse to accept it.
    >>
    >>> 1. How do I replace a table with three columns with an equivalent div-
    >>> based code?
    >>>
    >>> From:
    >>> <table>
    >>> <tr><td></td><td></td><td></td></tr>
    >>> </table>
    >>>
    >>> to:
    >>> <div>
    >>> <div id="div1"></div><div id="div2"></div><div id="div3"></div> </div>

    >>
    >> You need to add an id attribute or a class attribute to the outermost
    >> <div> or otherwise make it possible to refer to it in CSS. Let's
    >> suppose you use <div class="one-row-table>. Then you use the following
    >> stylesheet:
    >>
    >> .one-row-table {
    >> display: table;
    >> border-spacing: 2px;
    >> }
    >> .one-row-table > div {
    >> display: table-cell;
    >> padding: 1px;
    >> }
    >>
    >> This is the only way. Other answers are based on misconceptions: they
    >> may mimic some features of an HTML table some of the time, but adequate
    >> testing shows rather fast that it's still different from a table.
    >>
    >> On browsers that do not support display: table and relatives, such as
    >> IE 7, the div elements appear as blocks that each occupy the available
    >> width, of course. For such browsers, the simple answer to the question
    >> is "You don't". (You could mimic some features of a table, but that's a
    >> different issue.)
    >>
    >>> 2. Same question for a table with three rows:

    >>
    >> Obvious modifications are needed, using display: table-row for any div
    >> element to be rendered as a table row.

    >
    > Why would I use CSS to tell a table cell to display as a table cell when
    > that is what is by nature?


    Because the code above is not about table cells, dumbass. They are
    <div>s. It is about using tables only for data (as they should be used)
    and not for presentational markup. Are there any roses near you that you
    could wake up and smell?

    > Your attitude sucks. "Do it my way or no way".


    Please read: ISBN-10: 0671723650

    > There are 20 guys doing "jumping jacks" all in a line. One guy has his
    > hands down to the ground, while the others all have their hands up in
    > the air, and he asks,
    > "Why can't you guys get with the program?" That one guy would be you.


    There are a thousand guys doing jumping jacks; most have their hands up,
    a few have their hands down, and only one of them is sitting on his ass.
    That one would be you.

    --
    -bts
    -This space for rent, but the price is high
     
    Beauregard T. Shagnasty, Mar 8, 2012
    #3
  4. richard the sto0pid dumbass wrote:

    > Jukka K. Korpela wrote:
    >> Alfred Molon wrote:
    >>> There is probably a simple answer to this, but for some reason I
    >>> haven't figured it out yet.

    >>
    >> There's a simple answer, but many people refuse to accept it.
    >>
    >>> 1. How do I replace a table with three columns with an equivalent div-
    >>> based code?
    >>>
    >>> From:
    >>> <table>
    >>> <tr><td></td><td></td><td></td></tr>
    >>> </table>
    >>>
    >>> to:
    >>> <div>
    >>> <div id="div1"></div><div id="div2"></div><div id="div3"></div> </div>

    >>
    >> You need to add an id attribute or a class attribute to the outermost
    >> <div> or otherwise make it possible to refer to it in CSS. Let's
    >> suppose you use <div class="one-row-table>. Then you use the following
    >> stylesheet:
    >>
    >> .one-row-table {
    >> display: table;
    >> border-spacing: 2px;
    >> }
    >> .one-row-table > div {
    >> display: table-cell;
    >> padding: 1px;
    >> }
    >>
    >> This is the only way. Other answers are based on misconceptions: they
    >> may mimic some features of an HTML table some of the time, but adequate
    >> testing shows rather fast that it's still different from a table.
    >>
    >> On browsers that do not support display: table and relatives, such as
    >> IE 7, the div elements appear as blocks that each occupy the available
    >> width, of course. For such browsers, the simple answer to the question
    >> is "You don't". (You could mimic some features of a table, but that's a
    >> different issue.)
    >>
    >>> 2. Same question for a table with three rows:

    >>
    >> Obvious modifications are needed, using display: table-row for any div
    >> element to be rendered as a table row.

    >
    > Why would I use CSS to tell a table cell to display as a table cell when
    > that is what is by nature?


    Because the code above is not about table cells, dumbass. They are
    <div>s. It is about using tables only for data (as they should be used)
    and not for presentational markup. Are there any roses near you that you
    could wake up and smell?

    > Your attitude sucks. "Do it my way or no way".


    Please read: ISBN-10: 0671723650

    > There are 20 guys doing "jumping jacks" all in a line. One guy has his
    > hands down to the ground, while the others all have their hands up in
    > the air, and he asks,
    > "Why can't you guys get with the program?" That one guy would be you.


    There are a thousand guys doing jumping jacks; most have their hands up,
    a few have their hands down, and only one of them is sitting on his ass.
    That one would be you.

    --
    -bts
    -This space for rent, but the price is high
     
    Beauregard T. Shagnasty, Mar 8, 2012
    #4
    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. rich
    Replies:
    0
    Views:
    756
  2. Gus Richter

    Re: Replacing tables with divs

    Gus Richter, Mar 8, 2012, in forum: HTML
    Replies:
    0
    Views:
    395
    Gus Richter
    Mar 8, 2012
  3. dorayme

    Re: Replacing tables with divs

    dorayme, Mar 8, 2012, in forum: HTML
    Replies:
    15
    Views:
    682
    dorayme
    Mar 11, 2012
  4. idle
    Replies:
    14
    Views:
    851
    richard
    Mar 9, 2012
  5. richard

    Re: Replacing tables with divs

    richard, Mar 8, 2012, in forum: HTML
    Replies:
    15
    Views:
    791
    Beauregard T. Shagnasty
    Mar 14, 2012
Loading...

Share This Page