473,781 Members | 2,280 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

grid structures: TABLE/TR/TD vs. DIV

Is there really any advantage to using DIV elements with float style
properies, vs. the old method of TABLE and TR and TD?

I'm finding that by using DIV, it still involves the same number of
elements in the HTML to get everything just right. When you consider
the class attribute on the DIV elements, there's not much size savings
anymore for using DIV.

There are other disadvantages to not using TABLE/TR/TD, such as the
lack of ability to merge cells, and keeping rows and columns aligned
with each other under varying content.

Content should be in HTML and style in CSS. So how is that affected
by whether the HTML markup has TABLE/TR/TD or just DIV.

Note that I am not talking about the use of additional tables and cells
to create stylistic effects in the grid, such as spacing between cells.
This can be done in CSS regardless of whether the elemnts involved are
TABLE/TR/TD or just DIV.

I bet someone has already written "Tables considered harmful". But is
it really justified?

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
Apr 30 '06
117 18575
On Wed, 03 May 2006 17:20:04 +0200 Johannes Koch <ko**@w3develop ment.de> wrote:
| ph************* *@ipal.net wrote:
|
|> So tell me again why CSS needs to define the tabular relationships in
|> the data,
|
| CSS _does not_ define tabluar relationships. It just defines
| presentation characteristics . E.g. adjacent blocks with "display:
| table-cell" have the same height.

But how is it that the CSS capability is having certain people tell me
to not use TABLE/TR/TD/etc in HTML?

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 3 '06 #61

<ph************ **@ipal.net> kirjoitti
viestissä:e3*** ******@news2.ne wsguy.com...
On Wed, 3 May 2006 14:23:28 +0300 "W?rm" <no************ *@north.invalid >
wrote:
|
| "Neredbojia s" <http://www.neredbojias .com/fliam.php?cat=a lt.html>
kirjoitti
| viestiss?:Xn*** *************** *************** @208.49.80.251. ..
|
| <snip>
|
|>> If it's tabular data, use table. It's that simple.
|>>
|>> If table is just there to do layout certain way when data is _NOT
|>> tabular_, don't, there are almost certainly better ways to do that
|>> layout.
|>
|> A chessboard grid is not tabular data, it's structured data. There is
a
|> difference.
|
| And where did I say it is? Incase it escaped you what I meant above.
|
| Translation: (spell it word by word if meaning still happily escapes
from
| you)
|
| If
| it's
| tabular
| data,
| use
| table.
| It's
| that
| simple.
|
| And data in it meaning _ANY_ data, not just some silly chess stuff.

This still leaves open all the arguments about whether some data is, or
is not, tabular data. You're saying if it is tabular data, put it in a
table ... that's fine. You didn't say if it's not tabular data, what to
do or not do. But then you say "_ANY_ data", so I guess that leaves it
open to use a table for anything when the semantics effects of a table
is what is desired.


And I bet you also use hammer to drive in screws, instead of using
screwdriver. After all, IT can be done.

You are making issues from anything just because you wanna argue and not use
elements that have proper semantical meaning. Like in your linux page, those
links, they are LISTS of links so use <ul><li><a href="">..</a></li>...</ul>
structure for those. Those lists had image in top if I recall right, like a
heading, so maybe use heading for those, etc. Just because you try to twist
something to be tabular data when it obviously is not, it don't make it
"proper use of tables".

Use elements that have proper _SEMANTICAL_ meaning. If you got tabular data
it's table, for a LIST it is a list etc. When you do not have any element
that has proper semantical meaning for something, go for DIV or SPAN. Just
keep it simple.

Do not make issues just because you wanna argue.
May 3 '06 #62
ph************* *@ipal.net wrote:
On Wed, 03 May 2006 17:23:47 +0200 Johannes Koch <ko**@w3develop ment.de> wrote:
| ph************* *@ipal.net wrote:
|
|> On Wed, 03 May 2006 10:05:44 +0200 Johannes Koch <ko**@w3develop ment.de> wrote:
|> | In many browsers the CSS table presentation model _is_ used for
|> | presenting table/tr/td etc. That's the default rendering.
|>
|> A new feature that does the same thing as the old feature?
|
| HTML does not the same as CSS. HTML defines structure, CSS suggests
| presentation.

And a table is a structure. Of course its presentation can be styled, too.
Yes.
|> The relationship of data to each other when in a table is fixed. Is CSS
|> tables trying to change that?
|
| No, you can change the appearance with CSS.

That's what I thought. So for the structure, I should use HTML. Then
for the appearance use CSS. That's what I thought all along.
Yes.
|> I still see no point in having this in CSS
|> unless there is something different (and hopefully better).
|
| CSS defines the presentation characteristics used in the default
| rendering of table/tr/td elements. Just like CSS defines a font-weight
| property that is used (value bold) in the default rendering of HTML's
| strong element.

And I can change how table/tr/td presented, too.

But I still use table/tr/td to define the structure.


Yes.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
May 3 '06 #63
ph************* *@ipal.net wrote:
But how is it that the CSS capability is having certain people tell me
to not use TABLE/TR/TD/etc in HTML?


If you have tabular data, use table, caption, col, colgroup, thead,
tfoot, tbody, tr, th, td. If you don't have tabular data, use
appropriate markup. Additionally, if you want the non-tabular data to be
styled like a grid (equal height etc.), then use the CSS table model.

E.g. DocBook defines an element called 'simplelist'
(<http://www.docbook.org/tdg/en/html/simplelist.html >), which may be
presented as a grid:

apple banana bread cherry
hazelnut mango orange pear
potato tomato

This is not really tabular. What is it that mango has in common with
banana and tomato that differs from hazelnut, orange and pear? What OTOH
does mango have in common with hazelnut, orange and pear that differs
from banana and tomato? There are no row and column relations. It's just
a 2-dimensional presentation of a 1-dimensional list.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
May 3 '06 #64
To further the education of mankind, "W˙rm"
<no************ *@north.invalid > vouchsafed:

"Neredbojia s" <http://www.neredbojias .com/fliam.php?cat=a lt.html>
kirjoitti
viestissä:Xn*** *************** *************** @208.49.80.251. ..
And where did I say you said it? I was modifying your information,
not contradicting it.


If one would been talking about bananas and you'd go on telling pretty
accusatorily "but pink bananas are no bananas they're grapes!" one
might like EXPECT it has relation to talk about bananas you know.


Perhaps, but are we all just a troupe of gibbering monkeys? (-Okay,
present scope excluded.)
You're being childishly gratuitous. Of course, that rather fits this
whole
thread.


ofcoz :)


The whole point of my original post was to gleen feedback about what you
(et al) thought of my version of the grid. Instead I get nonsense. It
certainly seems as if ciwas has become much more like alt.2600 and its ilk
than it used to be.

--
Neredbojias
Infinity has its limits.
May 3 '06 #65

"Neredbojia s" <http://www.neredbojias .com/fliam.php?cat=a lt.html> kirjoitti
viestissä:Xn*** *************** *************** *@208.49.80.251 ...

<snip>
The whole point of my original post was to gleen feedback about what you
(et al) thought of my version of the grid. Instead I get nonsense.


Whoa!! Now hold on your horses and do some rechecking about WHO might have
said something. I haven't said __ANYTHING__ about your version of grid.
<snip>
May 3 '06 #66
On Wed, 03 May 2006 23:50:16 +0200 Johannes Koch <ko**@w3develop ment.de> wrote:
| ph************* *@ipal.net wrote:
|> But how is it that the CSS capability is having certain people tell me
|> to not use TABLE/TR/TD/etc in HTML?
|
| If you have tabular data, use table, caption, col, colgroup, thead,
| tfoot, tbody, tr, th, td. If you don't have tabular data, use
| appropriate markup. Additionally, if you want the non-tabular data to be
| styled like a grid (equal height etc.), then use the CSS table model.

In another followup you weren't saying this. Now you are. I don't get
what this flip flop is.

What do you think the "appropriat e markup" is for non-tabular data that
needs to have the same rigid structure as a table?
| E.g. DocBook defines an element called 'simplelist'
| (<http://www.docbook.org/tdg/en/html/simplelist.html >), which may be
| presented as a grid:
|
| apple banana bread cherry
| hazelnut mango orange pear
| potato tomato
|
| This is not really tabular. What is it that mango has in common with
| banana and tomato that differs from hazelnut, orange and pear? What OTOH
| does mango have in common with hazelnut, orange and pear that differs
| from banana and tomato? There are no row and column relations. It's just
| a 2-dimensional presentation of a 1-dimensional list.

That data could just as easily come out as:

apple banana bread cherry hazelnut
mango orange pear potato tomato

or as:

apple banana bread
cherry hazelnut mango
orange pear potato
tomato

This example is not what I have been talking about.

But I'll talking about it briefly, anyway. I'd like to have a COLUMN
orientation version of that, which would come out like this:

apple bread hazelnut orange potato
banana cherry mango pear tomato

or in a narrower window like:

apple cherry orange tomato
banana hazelnut pear
bread mango potato

or even:

apple hazelnut potato
banana mango tomato
bread orange
cherry pear

There are some things where this would work better, such as a list of
files in a folder/directory. But it would be style ... something to
decide how to present. Does CSS have a way to say to list stuff this
way? In case someone doesn't see what I'm showing, just look at the
alphabetical sequence of these "food items".

But if I have 2-dimentional data, then this is not the thing to be doing.
So I'm still back to using TABLE/TR/TD, etc., for the 2-D stuff.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 4 '06 #67
Deciding to do something for the good of humanity,
<ph************ **@ipal.net> declared in
comp.infosystem s.www.authoring.stylesheets:
But I'll talking about it briefly, anyway. I'd like to have a COLUMN
orientation version of that, which would come out like this: <snip> There are some things where this would work better, such as a list of
files in a folder/directory. But it would be style ... something to
decide how to present. Does CSS have a way to say to list stuff this
way?


CSS3 does/will.
http://www.w3.org/TR/2005/WD-css3-multicol-20051215/

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
May 4 '06 #68
On Thu, 4 May 2006 00:20:49 +0300 "W?rm" <no************ *@north.invalid > wrote:

| And I bet you also use hammer to drive in screws, instead of using
| screwdriver. After all, IT can be done.

I make my decisions based on what is practical. YES! I do use a hammer
on a screw ... to pound in just enough of a dent in the wood to keep the
screw stable as the screwdriver turns it into the wood. In extreme cases
I'll even use a drill to drill a hole a bit smaller than the screw core
to avoid causing the wood to split.

But it is NOT practical to use a hammer to drive the screw in all the way
unless you're objective it to just gouge a hole in the wood (someone might
want to do that). On a smaller scale, your dentist may well be doing
something akin to that with the tiny tools used for root canals.

I use TABLE/TR/TD for what those are the most practical solution I can
see at the time.
| You are making issues from anything just because you wanna argue and not use
| elements that have proper semantical meaning.

No.

I use what works most practical. I simply have not seen anything that
is any more practical than using TABLE/TR/TD for 2-D data. If you want
to every show how it is done some other way, maybe I can show you where
your solution doesn't match my problem.

| Like in your linux page, those
| links, they are LISTS of links so use <ul><li><a href="">..</a></li>...</ul>
| structure for those. Those lists had image in top if I recall right, like a
| heading, so maybe use heading for those, etc. Just because you try to twist
| something to be tabular data when it obviously is not, it don't make it
| "proper use of tables".

If you look more closely at the source you'll see that the list of links
is NOT structured in a table. The entire list for a given site, inside
a box for that site, is in ONE cell. There are BR elements to force each
link to a new line ... not TR elements.

An early version DID use UL/LI, but that never came out right. That MAY
be tweakable today, but some things like the bullet size don't seem to
be adjustable. So for now, they are just a list formed in lines with BR.

The page does have two basic levels of tables (with additional levels used
to wedge things into place). The outer level is to organize things into
3 columns ... in a way that stays as 3 columns. The inner level is the big
mess used to create the drop shadow effect. This inner layer is what will
go away soon. I already have it's general replacement done in CSS, and am
working on reorganizing the PHP code before it all goes online.
| Use elements that have proper _SEMANTICAL_ meaning. If you got tabular data
| it's table, for a LIST it is a list etc. When you do not have any element
| that has proper semantical meaning for something, go for DIV or SPAN. Just
| keep it simple.

Show me where a list (there are many separate lists on linuxhomepage.c om)
is being formatted using a table.
| Do not make issues just because you wanna argue.

Why not show what you think is the solution, so you can either prove
someone wrong ... or perhaps have your solution knocked down because
maybe you didn't understand the original problem. There are LAYERS
going on in LHP. The list of links is the 3rd layer. The shadows are
the 2nd layer (though in a correct markup, this shouldn't be a layer).
And the columnization is the 1st layer.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 4 '06 #69
Deciding to do something for the good of humanity,
<ph************ **@ipal.net> declared in
comp.infosystem s.www.authoring.stylesheets:
If you look more closely at the source you'll see that the list of links
is NOT structured in a table.
He never said it was. He was simply using it as another example of you
using non-semantic markup, similar to your use of tables.
An early version DID use UL/LI, but that never came out right. That MAY
be tweakable today, but some things like the bullet size don't seem to
be adjustable.
Not AFAIK (they tend to adjust with the font size but can't be resized
independently), but you can certainly remove the bullets altogether and
e.g. use an image instead.
So for now, they are just a list formed in lines with BR.


Which isn't really a list at all.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
May 4 '06 #70

This thread has been closed and replies have been disabled. Please start a new discussion.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.