 | |
#1
 
| |||
| |||
|
convert a table to a <div> controlled layout -
05-19-2008
, 09:39 AM
#2
| |||
| |||
|
|
How to convert the common html table code below - - to a <div> controlled layout using css? |
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/
#3
| |||
| |||
|
|
How to convert the common html table code below table align="center" tr td> 1.1 </td td> 1.2 </td td> 1.3 /td /tr tr td> 2.1 </td td> 2.2 </td td> 2.3 </td /tr tr td> 3.1 </td td> 3.2 </td td> 3.3 </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   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.
#4
| |||
| |||
|
|
How to convert the common html table code below table align="center" tr td> 1.1 </td td> 1.2 </td td> 1.3 /td /tr tr td> 2.1 </td td> 2.2 </td td> 2.3 </td /tr tr td> 3.1 </td td> 3.2 </td td> 3.3 </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.
#5
| |||
| |||
|
|
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 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....
#6
| |||
| |||
|
|
On May 19, 12:39 pm, richard <mem... (AT) newsguy (DOT) 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 |
Quote:
|
(or Jukka's), |
correct.
Quote:
|
Just for kicks I wanted to see how much more work it was to make the div version.... |
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/
#7
| |||
| |||
|
|
On May 19, 12:39 pm, richard <mem... (AT) newsguy (DOT) 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.
#8
| |||
| |||
|
|
Scripsit Travis Newbury: On May 19, 12:39 pm, richard <mem... (AT) newsguy (DOT) 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.
#9
| |||
| |||
|
|
On May 19, 12:39 pm, richard <mem... (AT) newsguy (DOT) 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...) |
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.
Quote:
|
Hey, don't read anything into this, I just had some free time on my hands.... |
dorayme
#10
| |||
| |||
|
|
Scripsit Travis Newbury: On May 19, 12:39 pm, richard <mem... (AT) newsguy (DOT) 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. .... |
Quote:
|
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. |
--
dorayme
 |
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.