convert a table to a <div> controlled layout

[Phper]

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]

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.

 

[richard]

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]

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]

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]

Scripsit Travis Newbury:

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.

 

[richard]

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]

Scripsit Travis Newbury:


You should.


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


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]

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.

 

[dorayme]

Scripsit Travis Newbury:

....

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]

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.

 

[Travis Newbury]

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]

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.

Apparently we both have some free time...

 

[dorayme]

Apparently we both have some free time...

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

 

[richard]

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.

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.

 

[dorayme]

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.

 

[Nik Coughlin]

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

 

[Adrienne Boswell]

Gazing into my crystal ball I observed dorayme

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]

[/QUOTE]

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.

 

[Andy Dingley]

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.