Tables?

[Toby A Inkster]

What are D-links?

Say we want to add a long description of a picture. What would be nice
would be to be able to do:

<img src="bridge.png" alt="Bridge" longdesc="bridge_description.html">

which is perfectly valid HTML, but most browsers ignore @longdesc. :-(

So we can instead do:

<img src="bridge.png" alt="Bridge" longdesc="bridge_description.html">
<a href="bridge_description.html" title="(description)">D</a>

Hence the term D-link.

 

[Barry Pearson]

There are several ways of implementing (say) a 3-column design in
CSS-P. (Float the sidebars, use absolute positioning, float the
centre column or use normal flow, perhaps give the centre column
wide margins ... ) [...] It would be better to work at a higher
level of abstraction.

And that is what a layout table is! A higher level of abstraction.
It is in the wrong place, in mark-up rather than in some metadata or
schema somewhere

Of course with a full implementation of CSS2, there are things like
"display: table-cell;" at our disposal, so this higher-level of
abstraction *is* available.

CSS2 positioning is only a mess because of IE's crappy support for
CSS.

No. That is not a higher level of abstraction. That is just fuller
implementation of a lower level of abstraction. And every browser I try screws
things up, not just IE. (Just examine the various attempts on the web - you
will find references to the "be nice to Opera" hack, and various others. And
Gecko browsers have a dreadful habit of losing the vertical scrollbar behind
the RHS of the viewport. And forgetting the need for a horizontal scrollbar
when it is necessary. Firebird struggles below a viewport width of 476
pixels).

The right level of abstraction would allow us to say things like "put X and Y
and Z across the display". Or "put P and Q and R below one-another". Or "put A
in the top right hand corner and B at the bttom out of the way". Now think of
a notation that could be useful for that. Perhaps: "start a new row; here is
the first thing in the row; here is the second thing in the row; ...". Gosh!
Tables.

Imagine that CSS didn't exist, and you wanted a notation that allowed you to
describe the intended layout of the major building blocks of the page relative
to one-another to satisfy the visual expectations of the users. What would
that notation be like? Don't think in terms of an implementation (float this,
position that). Think in terms of a notation for relative positioning. X to
the left of Y. B above Q. T in the top right hand corner taking precedence
over W.

The nearest I have ever seen to such a notation is the simple table model. It
isn't there yet, and perhaps a better notation would be very different indeed.
Perhaps it would also be able to express behaviour under extreme conditions.
But CSS1 and CSS2 don't come close. I doubt if CSS3 will come close. They are
not layout languages. They are languages for expressing a chosen attempt at
implementation of a layout, while losing the original intentions behind the
layout.

 

[Toby A Inkster]

Of course with a full implementation of CSS2, there are things like
"display: table-cell;" at our disposal, so this higher-level of
abstraction *is* available.

No. That is not a higher level of abstraction. [...] Now think of
a notation that could be useful for that. Perhaps: "start a new row; here is
the first thing in the row; here is the second thing in the row; ...". Gosh!
Tables.

And as I was saying, *exactly* this can *already* be done with CSS2
assuming you don't care about IE.

<style type="text/css">
@import url("fonts.css");
@import url("colours.css");
div.start-a-new-row { display: table-row; }
div.thing-in-a-row { display: table-cell; }
</style>
<h1>Heading</h1>
<div class="start-a-new-row">
<div class="first thing-in-a-row">Column one</div>
<div class="second thing-in-a-row">Column two</div>
</div>
<p>Footer</p>

Gosh! CSS2! Works in Opera! Works in Gecko!

I re-iterate: it is only IE that keeps us using complicated combinations
of float and positioning.

 

[Barry Pearson]

Barry Pearson wrote:

And that is what a layout table is! A higher level of abstraction.

Of course with a full implementation of CSS2, there are things like
"display: table-cell;" at our disposal, so this higher-level of
abstraction *is* available.

No. That is not a higher level of abstraction. [...] Now think of
a notation that could be useful for that. Perhaps: "start a new row;
here is the first thing in the row; here is the second thing in the
row; ...". Gosh! Tables.

And as I was saying, *exactly* this can *already* be done with CSS2
assuming you don't care about IE. [snip]
Gosh! CSS2! Works in Opera! Works in Gecko!

I re-iterate: it is only IE that keeps us using complicated
combinations of float and positioning.

I agree with your proposition, that by making a non-table mark-up behave like
tables, some of the advantages of tables can be achieved. It is a lower level
of abstraction, because you first have to understand the table level of
abstraction, then emulate it. (You have emulated <td> with something more
complicated). So it has not achieved the intent of higher levels of
abstraction, which is to focus more on the solution space and hide the
implementation details.

The converse also applies. You can start with table mark-up and disable
tables. What we have is various mark-up, such as <div>, <span>, <table>, with
default layout recommendations. Then we can change them to act like
one-another using CSS. (Again, IE is a problem).

I'm not sure what to make of your statement about IE. It is true, and will
continue to be true for several years. But we have to solve problems with the
tools that work. How would it change the advice we give to anyone about what
techniques to use to layout their pages?

I agree with what appears to be your view on floats and positioning. I have
become disillusioned about absolute positioning, because it is tricky to make
absolutely-positioned elements behave well with their intended neighbours. (At
least, I don't know how to make them act neighbourly). And I was interested to
read Eric Meyer say (in "Containing Floats") that "floats were not originally
intended to be used for layout"! Does that mean that all the people who don't
use tables because tables were (supposedly) not intended for layout should
avoid using floats for layout for the same reason? In fact, floats are my
*main* CSS-P technique, because of the problems I have with absolute
positioning!

I have just uploaded the following page. It covers some of this ground. I
suspect that there was a blind-spot a decade ago that relegated page-layout in
importance. We are now suffering the consequences. I don't think we will ever
recover, because the use of layout tables over the last 8 years has created a
legacy that will be with us for decades, and it changed the tools we use so
that the original concerns don't matter much now. The web has grown up (well,
it is behaving like a child of the same age behaves!) and is making its own
way, not really under the control of its parents (or anyone else!) We wanted
it to be a doctor or lawyer or academic, and it has become an artist or actor
or something dreadful like that!

"Reflections on CSS Positioning"
http://www.barry.pearson.name/articles/layout_tables/css_positioning.htm

 

[Toby A Inkster]

The converse also applies. You can start with table mark-up and disable
tables.

In some browsers, but the CSS2 spec specifically says that CSS2-compliant
browsers may ignore the "display" property on the <table> and related
elements.

But why would you want to do that anyway? You would get the worst of both
worlds. No backwards compatibility in non-CSS browsers, and no separation
of style from content.