473,686 Members | 3,266 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 18512
On Mon, 1 May 2006 05:59:50 +0300 "W?rm" <no************ *@north.invalid > wrote:
|
| <ph************ **@ipal.net> kirjoitti
| viestiss?:e3*** ******@news1.ne wsguy.com...
|
| <snip>
|
|> For another issue with CSS, take a block of text in a _single_ DIV element
|> and using CSS only, style that block so it appears with a drop shadow
|> effect
|> without changing the HTML at all.
|
| http://www.kolumbus.fi/ace/ng/box.html
|
| Div with heading and paragraph of text inside. If you add more paragraphs it
| needs tweaking though.

OK, different elements. Usable in the case of just needing those two.
Or maybe just any two. But my point is it's still two elements being
selected for in CSS. One should be able to do it all for one single
element since many other styles can be done that way.

Here's how I think it could be done in CSS. Some purists might whine
that it is, in effect, adding markup in CSS. First, you'd have a property
that specifies a number of virtual containers:

/* WARNING to stray readers - the following is NOT valid CSS */

..mybox {
virtual-containers: 2;
}

/* Then you'd configure them separately as needed: */

..mybox [0] {
background-color: #cccccc;
color: #000000;
margin-bottom: 10px;
}

..mybox [1] {
background-color: #ffffff;
color: inherit;
border: 0;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

Then what's inside could be configured any way desired without even any
concern for the fact that it's in something that is being styled with a
drop shadow. The border could be added by the interior elements, if one
is desired, or this can be changed to add one here.

The idea is the markup does not need to be changed just to make a more
complex style. An implemention _may_ actually accomplish it my adding
extra markup in its DOM structure (whatever they prefer as programmers).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #11
ph************* *@ipal.net wrote:
Show me CSS2 coding that will produce tables with the same semantics that
TABLE/TR/TD has, and maybe I could believe it's an implementatuon issue.


_Semantics_ are defined by HTML, not CSS: If you have tabular data and
so table semantics are appropriate, use the table element and its
companions. CSS however defines table-like _presentation_
characteristics . See the chapter about tables in the CSS 2(.1) spec.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
May 1 '06 #12
On Mon, 1 May 2006, ph************* *@ipal.net wrote:
Show me CSS2 coding that will produce tables with the same semantics
that TABLE/TR/TD has, and maybe I could believe it's an
implementatuon issue.


You're not making any kind of sense. The defined semantics of HTML
are what the HTML specification (for all its faults and weaknesses)
defines them to be. They don't change merely by fiddling around with
implementations of CSS.

May 1 '06 #13
ph************* *@ipal.net writes:
On 30 Apr 2006 19:26:38 +0100 Chris Morris <c.********@dur ham.ac.uk> wrote:
| Odd, most of the (real) chessboards I've seen are yellow and
| black. Maybe it varies from place to place.

I've seen a couple like that. But virtually all are red and black.
I'm not sure I've seen any red and black ones.

Maybe you should use CSS and let people select their own preferred
chess-board colours with alternative stylesheets. ;)
|> if I am going to lay out a grid structure as a Chess board, you can
|> bet I'm going to set the colors in the HTML tags.
|
| I can't imagine a situation where HTML-based colour setting would be
| more reliable than CSS-based colour setting in such a situation, with
| modern browsers at least - every graphical browser I know with an
| "ignore CSS" option also has some form of "ignore colours" option. If
| the colour is truly part of the content then perhaps an image (with
| suitable text alternative) is the better way to provide the
| information?

So how should the image be done? Don't forget it will be background.
There may be an image and/or text placed over it.
Well, again, CSS is not going to be more or less 'reliable' than HTML
at positioning and providing the image (though CSS has more options).

I'm having trouble thinking of a situation where you'd want a
background image of a chessboard (or a background grid in checkerboard
colours with the exact colour crucial) with text and images
superimposed. Could you give a bit more detailed example (with a URL
if you can) of the sort of thing you mean?
|> And I'm not going to use "float:left " to layout a Chess board, either.
|
| I'd have thought a chess board was certainly tabular data.

It probably comes down to what people see as tabular and not tabular.
Well, when I sketch chessboards out on paper, they end up as a grid
rather than linearised, which suggests a table. The 2-D relationship
of the squares and pieces is crucial to understanding the position.
When I want to align a set of boxes to hold blocks of text, such as
news items, I tend to want the behaviour TABLE/TR/TD bring, rather
than the behaviour I get with DIV+float.
Whereas if I was writing a news item with a pencil (or for an email) I
probably wouldn't be so concerned with the layout as long as it was in
the right 1-D order.

That's not to say a set of news items can't be expressed sensibly in a
table - it depends how the data for each news item is divided.
| Does IE7 support 'position: table-*'? That gives much the same layout
| options but doesn't interfere with table-reading mode so much. (Of
| course, even if it does, it'll be a couple of years before it's
| generally usable)

I have no idea. No IE running here of any version right now.


Well, if IE is out of the equation, and you only want the grid for
visual presentation, you might as well use position: table-*

--
Chris
May 1 '06 #14
>|> rule. In some cases background colors are _content_. One example
|> is the red and black colors of a Chess board. Sure, someone could | Odd, most of the (real) chessboards I've seen are yellow and
| black. Maybe it varies from place to place. I've seen a couple like that. But virtually all are red and black.


Standard colors are off-white and green and off-white and brown.
Having "black" as the dark color is allowed, but many players feel
that gives too little contrast between the dark pieces and the dark
squares.

From <http://www.fide.com/> in the Info section you can find the FIDE
recommendations for boards:

3. Chess boards

Wood, plastic, cardboard or cloth are recommended as material for
chessboards. The board may also be of stone or marble with
appropriate light and dark colours, provided the Chief Arbiter
finds it acceptable. Natural wood with sufficient contrast, such
as birch, maple or European ash against walnut, teak, beech,
etc., may also be used for boards, which must have a dull or
neutral finish, never shiny.

Combination of colours such as brown, green, or very light tan
and white, cream, off-white ivory, buff, etc., may be used for
the chess squares in addition to natural colours.

Now back to our actual newsgroup topic.
--
NewsGuy.Com 30Gb $9.95 Carry Forward and On Demand Bandwidth
May 1 '06 #15
On Mon, 01 May 2006 10:50:36 +0200 Johannes Koch <ko**@w3develop ment.de> wrote:
| ph************* *@ipal.net wrote:
|> Show me CSS2 coding that will produce tables with the same semantics that
|> TABLE/TR/TD has, and maybe I could believe it's an implementatuon issue.
|
| _Semantics_ are defined by HTML, not CSS: If you have tabular data and
| so table semantics are appropriate, use the table element and its
| companions. CSS however defines table-like _presentation_
| characteristics . See the chapter about tables in the CSS 2(.1) spec.

It probably comes down to the fact that my intentions in a grid structure
do match the semantics of a table and tabular data, despite that it may
not appear that way to people that tell me to not use the table element.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #16
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.ac.uk> wrote:

| ph************* *@ipal.net writes:
|> On 30 Apr 2006 19:26:38 +0100 Chris Morris <c.********@dur ham.ac.uk> wrote:
|> | Odd, most of the (real) chessboards I've seen are yellow and
|> | black. Maybe it varies from place to place.
|>
|> I've seen a couple like that. But virtually all are red and black.
|
| I'm not sure I've seen any red and black ones.
|
| Maybe you should use CSS and let people select their own preferred
| chess-board colours with alternative stylesheets. ;)

Fine. Show how.
|> |> if I am going to lay out a grid structure as a Chess board, you can
|> |> bet I'm going to set the colors in the HTML tags.
|> |
|> | I can't imagine a situation where HTML-based colour setting would be
|> | more reliable than CSS-based colour setting in such a situation, with
|> | modern browsers at least - every graphical browser I know with an
|> | "ignore CSS" option also has some form of "ignore colours" option. If
|> | the colour is truly part of the content then perhaps an image (with
|> | suitable text alternative) is the better way to provide the
|> | information?
|>
|> So how should the image be done? Don't forget it will be background.
|> There may be an image and/or text placed over it.
|
| Well, again, CSS is not going to be more or less 'reliable' than HTML
| at positioning and providing the image (though CSS has more options).

But how well can CSS choose which squares to color? If the browser
supports :first-child then you can color the top and left ones different.
| I'm having trouble thinking of a situation where you'd want a
| background image of a chessboard (or a background grid in checkerboard
| colours with the exact colour crucial) with text and images
| superimposed. Could you give a bit more detailed example (with a URL
| if you can) of the sort of thing you mean?

You want to color in CSS. Be my guest. Show how. But show CSS that
can be used with any chess board in tables where only the table element
has a class on it.
|> |> And I'm not going to use "float:left " to layout a Chess board, either.
|> |
|> | I'd have thought a chess board was certainly tabular data.
|>
|> It probably comes down to what people see as tabular and not tabular.
|
| Well, when I sketch chessboards out on paper, they end up as a grid
| rather than linearised, which suggests a table. The 2-D relationship
| of the squares and pieces is crucial to understanding the position.

However, the "CSS people" still often whine about the use of tables
for stuff that needs to be 2-D.
|> When I want to align a set of boxes to hold blocks of text, such as
|> news items, I tend to want the behaviour TABLE/TR/TD bring, rather
|> than the behaviour I get with DIV+float.
|
| Whereas if I was writing a news item with a pencil (or for an email) I
| probably wouldn't be so concerned with the layout as long as it was in
| the right 1-D order.
|
| That's not to say a set of news items can't be expressed sensibly in a
| table - it depends how the data for each news item is divided.

Within an item, sure, it would basically be 1-D. But when categorizing
items, and ordering them by some priority or date, then you may want a
grid structure. And tables seems nature for it.
|> | Does IE7 support 'position: table-*'? That gives much the same layout
|> | options but doesn't interfere with table-reading mode so much. (Of
|> | course, even if it does, it'll be a couple of years before it's
|> | generally usable)
|>
|> I have no idea. No IE running here of any version right now.
|
| Well, if IE is out of the equation, and you only want the grid for
| visual presentation, you might as well use position: table-*

The table/tr/td elements are still needed to markup what content goes in
which cell. At that point, it works fine so I don't see the need for a
position property.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #17
On Mon, 1 May 2006 10:14:35 +0100 Alan J. Flavell <fl*****@physic s.gla.ac.uk> wrote:
| On Mon, 1 May 2006, ph************* *@ipal.net wrote:
|
|> Show me CSS2 coding that will produce tables with the same semantics
|> that TABLE/TR/TD has, and maybe I could believe it's an
|> implementatuon issue.
|
| You're not making any kind of sense. The defined semantics of HTML
| are what the HTML specification (for all its faults and weaknesses)
| defines them to be. They don't change merely by fiddling around with
| implementations of CSS.

Of course it doesn't make sense. It was to get people to think about
the fact that it actually cannot be done (the same way) in CSS2.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 1 '06 #18
ph************* *@ipal.net wrote:
On 01 May 2006 12:41:20 +0100 Chris Morris <c.********@dur ham.ac.uk> wrote:

| I'm having trouble thinking of a situation where you'd want a
| background image of a chessboard (or a background grid in checkerboard
| colours with the exact colour crucial) with text and images
| superimposed. Could you give a bit more detailed example (with a URL
| if you can) of the sort of thing you mean?

You want to color in CSS. Be my guest. Show how. But show CSS that
can be used with any chess board in tables where only the table element
has a class on it.


A somewhat artificial restriction but here you go:

http://steve.pugh.net/test/chessboard.html

Works in Opera and FireFox and IE7, I presume it will work in Safari.

As in many situations, IE6 and lower are the problem, not the CSS
spec.

The amount of code can be reduce consideranly if you would allow
classes to be set on the <tr> elements.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
May 1 '06 #19
To further the education of mankind, Steve Pugh <st***@pugh.net >
vouchsafed:
You want to color in CSS. Be my guest. Show how. But show CSS that
can be used with any chess board in tables where only the table
element has a class on it.


A somewhat artificial restriction but here you go:

http://steve.pugh.net/test/chessboard.html

Works in Opera and FireFox and IE7, I presume it will work in Safari.

As in many situations, IE6 and lower are the problem, not the CSS
spec.


Very clever! Simple but sound. I like it.

--
Neredbojias
Infinity has its limits.
May 1 '06 #20

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.