grid structures: TABLE/TR/TD vs. DIV

[phil-news-nospam]

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/ |
-----------------------------------------------------------------------------

[Steve Pugh]

"Alan J. Flavell" <fl*****@physic s.gla.ac.uk> wrote:

On Tue, 2 May 2006, Chris Sharman wrote:

I agree, it's gross.
Yes, but I found it quite entertaining. I suspect that it's possible
to halve the quantity of CSS without having to work too hard, but
it's still gross..

Hmm, how insulted should I be by everyone calling it gross? :-o

It was a quickly thrown together demo to show that even with the
highly artificial constraint of only setting a class on the table
element CSS could do what was being asked. In reality I would use more
classes and dream about the days when CSS3 :nth-child selectors are
supported.

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells. But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The two sets of colour styles can be combined into one, but that
hardly saves anything as it's the selectors that make the bulk, not
the properties. This would be the way to go if you wanted to make it
so that each of the colours could be changed in just one place.

http://www.w3.org/TR/CSS21/tables.html#q4

Your column colour can only be effective if the rows *and* the cells
specify (or imply) transparent backgrounds. That's fine if all the
rows in a given column are to be the same colour; but it's a bit of a
non-event if you want to make checkerboard patterns.

There's also the fact that background is supported but color is not
which means that any colouring done via columns will break the best
practice rule of setting colour and background together.

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/>

[Alan J. Flavell]

On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.
Something along those lines, indeed.
But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

http://www.w3.org/TR/CSS21/tables.html#q4

Your column colour can only be effective if the rows *and* the
cells specify (or imply) transparent backgrounds. That's fine if
all the rows in a given column are to be the same colour; but it's
a bit of a non-event if you want to make checkerboard patterns.

There's also the fact that background is supported but color is not
which means that any colouring done via columns will break the best
practice rule of setting colour and background together.

True.

Now, here's something odd that I pondered on:

Unicode has two sets of chess pieces, called "white" and "black".
See the set at e.g
http://ppewww.ph.gla.ac.uk/~flavell/...a26.html#x2654
(assuming you have a capable font).

If you exhibit them on a black background, they disappear (not
surprisingly).

If you style a "black" one white, on a black background, then it
looks like a white piece.

Which leaves only the "white" one, styled white, to represent the
black piece on a black background.

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)

[dingbat]

ph************* *@ipal.net wrote:

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

No, of course not. You might not even need float, as CSS has
table-specific formatting properties too.
The real question is "Is an inflexible rectilinear grid mechanism the
right way to do layout, and particularly fluid layout?". If you
rigidly replicate <table> behaviour with <div>+CSS, then you're still
no better than HTML 2.0 pure-tables.

[Steve Pugh]

"Alan J. Flavell" <fl*****@physic s.gla.ac.uk> wrote:

On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.
Something along those lines, indeed.

But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

Cunning.
You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

tr:first-child+tr perhaps?

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/>

[Steve Pugh]

Steve Pugh <st***@pugh.net > wrote:

"Alan J. Flavell" <fl*****@physic s.gla.ac.uk> wrote:

On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.

Something along those lines, indeed.

But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

Cunning.

You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

tr:first-child+tr perhaps?

Yep. http://steve.pugh.net/test/chessboard3.html

Still 'gross' though.

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/>

[Martin Eyles]

"Wÿrm" <no************ *@north.invalid > wrote in message
news:e3******** **@phys-news4.kolumbus. fi...

<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.

There are two ways of doing this.

The first is the ideal way - but doesn't work in anything due to the use of
:first-child

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #ffffff;
color: inherit;
border: 1px solid #000000;
border-top: none;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox:first-child
{
background-color: #e0e0ff;
border-top: 1px solid #000000;
color: inherit;
}

The second version will work in firefox fine (certainly 1.5, not sure about
1.0), but still not in IE6 (not sure about IE7)

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #e0e0ff;
color: inherit;
border: 1px solid #000000;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox > * + *
{
border-top: none;
background-color: #ffffff;
color: inherit;
}

Still, I think the original link is the best cross browser method available
at the moment, but I just wanted to show how things might be in the brighter
future. :-)

ME

[Martin Eyles]

"Alan J. Flavell" <fl*****@physic s.gla.ac.uk> wrote in message
news:Pi******** *************** ********@ppepc8 7.ph.gla.ac.uk. ..

Now, here's something odd that I pondered on:

Unicode has two sets of chess pieces, called "white" and "black".
See the set at e.g
http://ppewww.ph.gla.ac.uk/~flavell/...a26.html#x2654
(assuming you have a capable font).

If you exhibit them on a black background, they disappear (not
surprisingly).

If you style a "black" one white, on a black background, then it
looks like a white piece.

Which leaves only the "white" one, styled white, to represent the
black piece on a black background.

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)

I can't see those characters in my browser (firefox 1.5 on windows server
2003). I just get question marks instead. Is there a way to fix that - eg.
changing fonts?

Anyway, one way round this problem I would think would be to use spans or
divs to contain the chess pieces, and use css content. I would expect it to
work in firefox. I you were able to turn than into an example page showing
all the chess pieces on the chess board in starting places I'd be pretty
impressed.

eg.

_html_

<td><div class="black king"></div></td>

_style (I am only using round brackets () to denote shorthand)_

black king {content: '♚'}

(css for a black square) > black king {content: '♔'; colour: white}

[Alan J. Flavell]

On Tue, 2 May 2006, Martin Eyles wrote:

[...]

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)
I can't see those characters in my browser (firefox 1.5 on windows
server 2003). I just get question marks instead. Is there a way to
fix that - eg. changing fonts?

If you have MS Office, or other eligible application, then it's worth
installing Arial Unicode MS from it. SIL Viewglyph, at any rate,
tells me that the glyphs are present there. AFAIK this font still does
not come free with any bare OS, but many MS products have it included.

The glyphs are also present in the shareware unicode font "Code2000"
which a web search should easily find.

Unfortunately I don't really know how to ask the Windows font system
the question "which of my installed fonts contain this specific
Unicode character?". I only know how to browse a given font (e.g with
SIL Viewglyph) and see whether it does or not. At any rate, "Lucida
Sans Unicode", which has a fair character repertoire, and comes as
standard with current Windows OSes, does not contain the chess pieces
(though it does contain the four card suits, in black - U+2660, 3, 5
and 6).

I found, incidentally, that installing Japanese language support (even
though I can't read it) had the side effect of considerably improving
my coverage of mathematical operators and various other symbols.
See e.g http://www.alanwood.net/unicode/fontsbyrange.html#u2600
which may explain it - Windows is presumably installing extra fonts
which just /happen/ also to have improved symbol repertoires.
Anyway, one way round this problem I would think would be to use
spans or divs to contain the chess pieces, and use css content. I
would expect it to work in firefox. I you were able to turn than
into an example page showing all the chess pieces on the chess board
in starting places I'd be pretty impressed.

So would I - but it would be an even *worse* example of confuddling
content with presentation!

cheers

--

The only problem I had with MSN messenger was finding out how to turn it
off. Once that was accomplished, I was a lot happier. - Chris Tolley

[phil-news-nospam]

On Tue, 02 May 2006 11:46:58 +0100 Chris Sharman <ch***********@ sorry.nospam> wrote:

| This is a fairly pathological example in any case. It's more common in
| my experience to want to colour rows or columns, enabling the classes to
| be moved out to tr or col, for more concise html.

The more common problem I see is in so many examples available online,
the CSS must be coded for a specific number of rows or columns. What
I want is CSS that works just fine regardless of how many rows and/or
columns there are.

And I want CSS that lets me do hover bouncing drop shadows without having
to change the markup to accomodate it. The problem is, all examples I
have seen show extra DIV or other elements added to prove a mechanism to
implement the visual effect style. IMHO, whatever style I want to do
should be appliable to exactly a single element in the markup (for each
such element to which it applies, of course).

I was just looking at online examples of rounded corners. Ewww, more
horrors with large images and size limitations. But I need to spend some
time on trying to better innovate that myself, first, before I say it is
a CSS problem.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[phil-news-nospam]

On Tue, 02 May 2006 13:31:07 +0100 Steve Pugh <st***@pugh.net > wrote:
| "Alan J. Flavell" <fl*****@physic s.gla.ac.uk> wrote:
|>On Tue, 2 May 2006, Chris Sharman wrote:
|>
|>> I agree, it's gross.
|>
|>Yes, but I found it quite entertaining. I suspect that it's possible
|>to halve the quantity of CSS without having to work too hard, but
|>it's still gross..
|
| Hmm, how insulted should I be by everyone calling it gross? :-o

It's not an insult. Lots of my (developed long ago) HTML is certainly
quite gross, and recognized as such even back then. I'm looking for
CSS methods to do what I've done in the past in purely HTML, with the
requirement that the end results be at least just as good. I'm not
willing to take even one tiny step backwards to achieve results since
I know I can step back to the (ugly and gross) HTML and still have it.

If your example is gross, but turns out to be the only way to make it
work, then it's a go, anyway. But if there's a better way, we ought
try to find it.
| It was a quickly thrown together demo to show that even with the
| highly artificial constraint of only setting a class on the table
| element CSS could do what was being asked. In reality I would use more
| classes and dream about the days when CSS3 :nth-child selectors are
| supported.

Turns out the chess board example was a bad example to begin with.
I should try to think up something else.

But today, I'm playing with rounded corners and seeing what I can do to
get them working in CSS as well as I had them working in just HTML.
Google found me plenty of online examples, but so far all of them seem
to be using elongated images ... e.g. images that include a stretch of
the sides as well, for at least some of them. Some strategies differ,
but it all seems to be yet another case of the stylesheets having to
specify some of the mechanics of layout to achieve a style result.
In other words, I still have to add extra elements to the markup as
the hooks CSS needs.

I think maybe tables will work (in a simpler way, of course) to do this
with CSS as well.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------