Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Replacing tables with divs

Reply
Thread Tools

Re: Replacing tables with divs

 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      03-08-2012
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/
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      03-08-2012
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.

 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-08-2012
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
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-08-2012
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Replacing tables with divs richard HTML 15 03-14-2012 07:26 PM
Re: Replacing tables with divs dorayme HTML 15 03-11-2012 02:28 AM
Re: Replacing tables with divs idle HTML 14 03-09-2012 04:17 AM
Re: Replacing tables with divs Gus Richter HTML 0 03-08-2012 01:16 AM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM



Advertisments