Why CSS tables?

[dmcconkey]

Hi folks,

In reading the thread "Column width in a CSS table", I realized there
was much confusion over CSS tables--rather the CSS display:table family
of CSS properties. I then wondered if I might have it all wrong...

I avoid display:table thanks to the plague that is Internet Explorer.
Though, generally, I avoid tables anyway. No problem. Tables (HTML
tables this time) are for conveying tabular data. Not layout.

CSS handles layout fairly well, assuming you're not emulating some
graphic designer's idea of a webpage. When I want to control float and
position, I use CSS. When I generate a year-end revenue report, I use
HTML tables.

Is this now antiquated? I've always thought that tables are still okay
for organizing tabular data. After all, that's using HTML for
structure--as it should be.

Why then do CSS tables exist? Why would I want to emulate HTML table
tags using CSS display properties?

Have I missed the boat entirely? Am I now as confused as I was in 1998?

Thanks,
-Dan

 

[Barbara de Zoete]

In reading the thread "Column width in a CSS table", I realized there
was much confusion over CSS tables--rather the CSS display:table family
of CSS properties. I then wondered if I might have it all wrong...

[ tables for tabular data; no tabular data no table. No? ]

Why then do CSS tables exist? Why would I want to emulate HTML table
tags using CSS display properties?

Have I missed the boat entirely? Am I now as confused as I was in 1998?

I wouldn't know about your confusion, but in
<http://www.w3.org/TR/CSS2/tables.html> it says:

<quote>
The CSS model does not require that the document language
include elements that correspond to each of these components.
For document languages (such as XML applications) that do not
have pre-defined table elements, authors must map document
language elements to table elements; this is done with the
'display' property.
</quote>

and

<quote>
17.2.1 Anonymous table objects
Document languages other than HTML may not contain all the
elements in the CSS2 table model. In these cases, the "missing"
elements must be assumed in order for the table model to work.
</quote>

So, CSS tables are especially useful for use with document languages other than
HTML, like XML, that do _not_ have elements necessary for creating data tables.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Toby Inkster]

So, CSS tables are especially useful for use with document languages
other than HTML, like XML, that do _not_ have elements necessary for
creating data tables.

And also for creating a tabular look where the data might not actually
be tabular.

 

[Travis Newbury]

[ tables for tabular data; no tabular data no table. No? ]

<snip>

Man, you made it all the way through their post and did not plonk them...
Is everyone in hell cold now?

 

[dmcconkey]

Got it. My confusion lay in my narrow perspective of markup languages.
I have little experience with XML, WML, SGML, etc. To me, CSS tables
seemed useless in HTML, and, in fact, they nearly are.

When I broaden my horizons (more likely, when a client pushes me into
designing for Blackberries), I'll give them another look.

Thank you, Barbara.

 

[dorayme]

From: (e-mail address removed)

To me, CSS tables seemed useless in HTML, and, in fact, they nearly are.

er... um... hang on a sec pal...

dorayme

 

[dmcconkey]

I suppose that's what I was asking to begin with. What's a practical
example of CSS tables in HTML? Examples given above were 1) for markup
languages lacking tabular elements, or 2) to emulate a tabular look for
non-tabular data.

The first doesn't apply to HTML. Based on my limited understanding, the
second seems better met with CSS position and float. I'll gladly
retract that last statement if I misunderstood what was meant by that.
(I'm not really sure when I'd want to make something look tabular.)

I'm reading through the CSS2 spec right now, but if anyone can help
fill in my lack of understanding, I'd truly appreciate it.

Thanks,
-Dan

 

[David Dorward]

The first doesn't apply to HTML. Based on my limited understanding, the
second seems better met with CSS position and float. I'll gladly
retract that last statement if I misunderstood what was meant by that.
(I'm not really sure when I'd want to make something look tabular.)

How many posts does this group get from people looking for 2/3 column
layouts where the backgrounds of the columns are all the same length and
any column can be the longest?

 

[David Dorward]

I suppose that's what I was asking to begin with. What's a practical
example of CSS tables in HTML? Examples given above were 1) for markup
languages lacking tabular elements, or 2) to emulate a tabular look for
non-tabular data.

Oh, and I've just remembered a third reason.

If the layout of tables is defined with CSS, then you can style a data table
so it doesn't look like a table. Thus you might have a table such as:

<table>
<tr> <td> <img> </td> <td> caption </td> </tr>
<tr> <td> <img> </td> <td> caption </td> </tr>
<tr> <td> <img> </td> <td> caption </td> </tr>
</table>

And then style it:

tr {
display: inline-block;
border: solid black 1px;
padding: 1ex;
margin: 1ex;
}

td {
display: block;
}

To have a number of images, each with a caption below, arranged side by side
and flowing onto new lines as needed.

 

[Luigi Donatello Asero]

Oh, and I've just remembered a third reason.

If the layout of tables is defined with CSS, then you can style a data table
so it doesn't look like a table. Thus you might have a table such as:

<table>
<tr> <td> <img> </td> <td> caption </td> </tr>
<tr> <td> <img> </td> <td> caption </td> </tr>
<tr> <td> <img> </td> <td> caption </td> </tr>
</table>

And then style it:

tr {
display: inline-block;
border: solid black 1px;
padding: 1ex;
margin: 1ex;
}

td {
display: block;
}

To have a number of images, each with a caption below, arranged side by side
and flowing onto new lines as needed.

That is the same as to use tables for the layout instead of using them only
for tabular data, isn´t it? Is that allowed?
What about mixing a table with an unordered list as I tested at
https://www.scaiecat-spa-gigi.com ?

--
Luigi ( un italiano che vive in Svezia)
https://www.scaiecat-spa-gigi.com/






https://www.scaiecat-spa-gigi.com/

 

[David Dorward]

That is the same as to use tables for the layout instead of using them
only for tabular data, isn´t it?

No. The table describes the relationship between the data:

<tr>
<th scope="col">Image</th>
<th scope="col">Caption</th>

What about mixing a table with an unordered list as I tested at
https://www.scaiecat-spa-gigi.com ?

As far as I can tell; you don't. You have an unordered list containing
welcome messages in a number of different langauges, and you have a table
using the same data structure that I suggested previously.

BTW, your language selection system doesn't appear to be very effective. I
found it rather difficult to spot the English bit. This is probably due to
a combination of:

(a) Usually one looks for the *name* of the language, not the word
"Welcome" traslated into it

(b) Over 50% of each box is a place name, I'm guessing in Italy, which
makes every box look like its written in Italian at first glace.

You might want to reconsider what text you use there