Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   convert a table to a <div> controlled layout (http://www.velocityreviews.com/forums/t615660-convert-a-table-to-a-div-controlled-layout.html)

Phper 05-19-2008 01:39 PM

convert a table to a <div> controlled layout
 
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?

Jukka K. Korpela 05-19-2008 01:57 PM

Re: convert a table to a <div> controlled layout
 
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/


richard 05-19-2008 03:41 PM

Re: convert a table to a <div> controlled layout
 
On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
<hi.steven.tu@gmail.com> 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 05-19-2008 04:39 PM

Re: convert a table to a <div> controlled layout
 
On Mon, 19 May 2008 06:39:30 -0700 (PDT), Phper
<hi.steven.tu@gmail.com> 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.


Travis Newbury 05-19-2008 05:56 PM

Re: convert a table to a <div> controlled layout
 
On May 19, 12:39 pm, richard <mem...@newsguy.com> 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....

Jukka K. Korpela 05-19-2008 07:27 PM

Re: convert a table to a <div> controlled layout
 
Scripsit Travis Newbury:

> On May 19, 12:39 pm, richard <mem...@newsguy.com> 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/


richard 05-19-2008 07:28 PM

Re: convert a table to a <div> controlled layout
 
On Mon, 19 May 2008 10:56:04 -0700 (PDT), Travis Newbury
<TravisNewbury@hotmail.com> wrote:

>On May 19, 12:39 pm, richard <mem...@newsguy.com> 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 05-19-2008 08:38 PM

Re: convert a table to a <div> controlled layout
 
On Mon, 19 May 2008 22:27:43 +0300, "Jukka K. Korpela"
<jkorpela@cs.tut.fi> wrote:

>Scripsit Travis Newbury:
>
>> On May 19, 12:39 pm, richard <mem...@newsguy.com> 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.

dorayme 05-19-2008 09:59 PM

Re: convert a table to a <div> controlled layout
 
In article
<13131dd7-7f52-493a-bf92-189464ed5eb6@y38g2000hsy.googlegroups.com>,
Travis Newbury <TravisNewbury@hotmail.com> wrote:

> On May 19, 12:39 pm, richard <mem...@newsguy.com> 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 05-19-2008 10:02 PM

Re: convert a table to a <div> controlled layout
 
In article <twkYj.3490$_03.1159@reader1.news.saunalahti.fi> ,
"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:

> Scripsit Travis Newbury:
>
> > On May 19, 12:39 pm, richard <mem...@newsguy.com> 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


All times are GMT. The time now is 12:37 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.