Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > convert a table to a <div> controlled layout

Reply
Thread Tools

convert a table to a <div> controlled layout

 
 
Phper
Guest
Posts: n/a
 
      05-19-2008
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?
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      05-19-2008
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/

 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      05-19-2008
On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
<(E-Mail Removed)> 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.
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      05-19-2008
On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
<(E-Mail Removed)> 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.

 
Reply With Quote
 
Travis Newbury
Guest
Posts: n/a
 
      05-19-2008
On May 19, 12:39 pm, richard <(E-Mail Removed)> 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....
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      05-19-2008
Scripsit Travis Newbury:

> On May 19, 12:39 pm, richard <(E-Mail Removed)> 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/

 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      05-19-2008
On Mon, 19 May 2008 10:56:04 -0700 (PDT), Travis Newbury
<(E-Mail Removed)> wrote:

>On May 19, 12:39 pm, richard <(E-Mail Removed)> 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.
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      05-19-2008
On Mon, 19 May 2008 22:27:43 +0300, "Jukka K. Korpela"
<(E-Mail Removed)> wrote:

>Scripsit Travis Newbury:
>
>> On May 19, 12:39 pm, richard <(E-Mail Removed)> 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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-19-2008
In article
<(E-Mail Removed)>,
Travis Newbury <(E-Mail Removed)> wrote:

> On May 19, 12:39 pm, richard <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-19-2008
In article <twkYj.3490$(E-Mail Removed)> ,
"Jukka K. Korpela" <(E-Mail Removed)> wrote:

> Scripsit Travis Newbury:
>
> > On May 19, 12:39 pm, richard <(E-Mail Removed)> 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
 
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
Layout suggestions - table layout sso Java 6 04-30-2009 05:17 AM
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments