col
elements to cells:first-child |
col style |
col class |
col align |
td class |
---|---|---|---|---|
42 | 42 | 42 | 42 | 42 |
42 000 000 | 42 000 000 | 42 000 000 | 42 000 000 | 42 000 000 |
For the test table, the following style sheet is used in order to affect the first column:
td:first-child {
text-align: right;
color: red;
background: white;
font-family: monospace; }
The following markup relates to
the second column:
<col style="text-align: right; color: red; background: white;
font-family: monospace;">
The third column has
<col class="foo">
and the page's style sheet contains the following:
.foo { text-align: right;
color: red;
background: white;
font-family: monospace; }
The fourth column has, for comparison,
<col align="right">
and no style sheet applying to it.
The fifth column has
class="foo"
in each cell element (td
or th
)
in it.
class
attributes in
each cell. But this means a lot of markup in the general case.
td:first-child, .foo
in a CSS rule when the first column is to be styled.
Optimistically, we might try to apply the combination method
more generally. But when
other columns than the first one are to be styled, we seem to face a strange
IE bug. The following table has <col class="bar">
, and
there's the following style sheet:
.bar, td:first-child + td { text-align: right; color: green; background: #ffd; }
(On this test page, it's a bit more complicated, because the two tables on the page need to be styled differently. But this does not affect the results, i.e. this approach does not work on IE even if we simplify the rule to to the above.)
We expect this to work on all the browsers tested, but while Opera and Mozilla apply the style sheet, IE does not. Apparently the complex selector confuses it so thoroughly that it does not apply the rule at all.
42 | 42 |
42 000 000 | 42 000 000 |
Writing two CSS rules, duplicating all the declarations, would help here, but it would be rather clumsy.
By HTML rules, <col align="right"> makes the cells in the column "inherit" the attribute align="right" in some (semi-)mystical way under some conditions. Since such inheritance is neither an SGML concept nor a CSS concept, we should be a little puzzled. The "inheritance" is described under a strange heading, Inheritance of alignment specifications, which actually mentions the following HTML attributes as "inherited": align, char, charoff; valign, lang, dir, style.
According to the CSS 2 specification (see 17.3 Column selectors), "Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns." The "aspects" influenced are border, background, width, and visibility properties. This is described as some exceptional rules that are applied in some special cases, not as normal inheritance.
Thus, to set the alignment of all cells in a column, we can use <col align="...">. But what can we do e.g. in order to set the font size for a column, except by using class or style attributes for each cell? Can we expect a style attribute set for <col> as "inherited" to the cells, so that it will take effect there, even for those properties that are not listed in the CSS specification as "influencing" cells when set for a column?