Why Isn't This <colgroup> Tag Working?

[Larry Lindstrom]

Hello Again Folks:

I've been working on a C++ bug for the last week, but I'm back on
the HTML Dog tutorial now.

The issue today is the <colgroup> tag.

The sample is HTML Dog's "HTML Advanced - Mastering Tables".

My CSS style isn't being applied to a column identified in the
<colgroup>.

Neither Firefox or Internet Explorer display this as I want it
displayed.

I've cut and pasted the table sample to my page's source, in order
to avoid a typeo, but it still doesn't work.

The HTML and CSS validator don't complain.

Perhaps my problem is in the HTML that surrounds the table's code.

http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html

I appreciate the assistance knowledgeable people offer in this
newsgroup.

What am I doing wrong.

Thanks
Larry

 

[Andreas Prilop]

The issue today is the <colgroup> tag.

<colgroup> is useless because browsers have always ignored
this tag. And <col> is almost useless, too.

 

[Larry Lindstrom]

<colgroup> is useless because browsers have always ignored
this tag. And <col> is almost useless, too.

Thanks Andreas:

This does sound like something a user might want to do.

Is there a convenient method to apply a style to one or more columns?

Thanks
Larry

 

[Jukka K. Korpela]

My CSS style isn't being applied to a column identified in the
<colgroup>.

The use of <colgroup> is redundant and irrelevant here, since there is
no use in defining a group that contains all the columns and since your
code sets properties on a <col> element, not on the <colgroup> element.

In a sense, the properties _are_ set on the <col> element, but setting
color and font weight on it has no effect. The element contains no text
and no children.

This is rather confusing, but after reading several explanations during
a decade or so, I think I sort-of understand the point. One of the
eye-openers was Hixie's posting long ago:
http://archivist.incutio.com/viewlist/css-discuss/34844

The point is that an HTML table isn't really a nice mathematical
structure (a matrix) but an array of arrays. Each cell is a child of a
row (<tr> element), never a child of a column element. The <col>
elements may be used to affect rendering (and logical structure) in
_some_ limited ways. One might even say that the row is a caring mother
of a cell, whereas the column is a distant father that occasionally
inteferes.

For example, when a cell is to be colored (i.e., a browser decides which
content color to use), the browser checks whether the cell itself has
color property assigned to it; if not, it inherits color from the
parent, the caring mother, <tr>; and if the parent has no color set, the

Perhaps my problem is in the HTML that surrounds the table's code.

http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html

The surrounding markup is OK. The problem is in the limitations/features
of HTML and CSS regarding tables.

The CSS code is:

..alternate
{
color: red;
font-weight: bold;
}

As class="alternate" is set on a <col>, the settings have no effect, for
reasons above. The CSS Validator does not complain, since in CSS, you
can set any property on any element - some (many) settings just have no
effect, e.g. setting a color on an empty element.

This <col> element appears as the second one among the <col> elements
for the table. The desired effect of styling the second column can be
achieved by replacing the selector .alternate by the following:

td:first-child + td

The <col> elements have no role here, but there is no reason to remove
them. They might be seen as documentation-like, and there might later be
some use for them.

The selector above works on almost all browsers, excluding older
versions of IE. The idea is to use a selector that matches any cell that
is the first child of its parent, i.e. the first cell of a row, and then
add the "+ td", which creates a selector that matches any <td> element
that immediately follows the first cell of a row.

In CSS3, with more limited but growing support, you could write a little
simpler:

td:nth-child(2)

which matches any <td> element that is the 2nd child of its parent.

 

[Larry Lindstrom]

This <col> element appears as the second one among the <col> elements
for the table. The desired effect of styling the second column can be
achieved by replacing the selector .alternate by the following:

td:first-child + td

The <col> elements have no role here, but there is no reason to remove
them. They might be seen as documentation-like, and there might later be
some use for them.

The selector above works on almost all browsers, excluding older
versions of IE. The idea is to use a selector that matches any cell that
is the first child of its parent, i.e. the first cell of a row, and then
add the "+ td", which creates a selector that matches any <td> element
that immediately follows the first cell of a row.

In CSS3, with more limited but growing support, you could write a little
simpler:

td:nth-child(2)

which matches any <td> element that is the 2nd child of its parent.

Thanks Jukka:

I appreciate the education about the problems with the <colgroup> tag.

When I started this response to your advice, I was going to tell you
that I couldn't get "td:first-child + td" to have any effect on the table.

Before I hit "Send", I decided to try pulling out the <colgroup>
from the HTML.

Now your recomendation works like a charm. I was expecting FireFox
to work, but I was pleasantly surprised to see it display properly with
Internet Explorer.

I've experimented with the arguments, "td:first-child + td + td"
applies the style to the third column.

Are there other interesting arguments to "td:first-child"?

Where can I find more about this?

I appreciate your advice Jukka.

Thanks
Larry

 

[Jukka K. Korpela]

When I started this response to your advice, I was going to tell you
that I couldn't get "td:first-child + td" to have any effect on the table.

Before I hit "Send", I decided to try pulling out the <colgroup>
from the HTML.

That's strange, because <colgroup> or <col> markup should have no impact
on this, and your current
http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html
works even if I add such markup (well, remove the comment start and end
that turn them to a comment), as expected.

Now your recomendation works like a charm. I was expecting FireFox
to work, but I was pleasantly surprised to see it display properly with
Internet Explorer.

Yes, in simple cases like this, the :first-child pseudo-class and the
"+" construct in selectors works even on IE 7, in "standards mode" (but
even IE 9 falls to "Quirks Mode" it does not work, if you remove the
doctype declaration, so just keep it there).

Support summaries:
http://www.quirksmode.org/css/contents.html

I've experimented with the arguments, "td:first-child + td + td"
applies the style to the third column.
Right.

Are there other interesting arguments to "td:first-child"?

It's not really an argument, it's a matter of combining two types of
selectors. Basically td:first-child is like adding a class attribute,
say "class=first_cell", to each <td> that is the first cell of its row
and then using td.first_cell. The "+" operator creates a contextual
selector: A + B matches any B that immediately follows a A, as the next
sibling within the same parent element. You can combine them with other
types of selectors, e.g. td:first-child + td.foo matches those cells in
the second column that have class=foo set on them.

Where can I find more about this?

Here's one good-looking description of CSS selectors:
http://reference.sitepoint.com/css/selectorref

 

[richard]

Hello Again Folks:

I've been working on a C++ bug for the last week, but I'm back on
the HTML Dog tutorial now.

The issue today is the <colgroup> tag.

The sample is HTML Dog's "HTML Advanced - Mastering Tables".

My CSS style isn't being applied to a column identified in the
<colgroup>.

Neither Firefox or Internet Explorer display this as I want it
displayed.

I've cut and pasted the table sample to my page's source, in order
to avoid a typeo, but it still doesn't work.

The HTML and CSS validator don't complain.

Perhaps my problem is in the HTML that surrounds the table's code.

http://67.171.145.190/htmldog_htdoc...ial/04_mastering_tables/mastering_tables.html

I appreciate the assistance knowledgeable people offer in this
newsgroup.

What am I doing wrong.

Thanks
Larry

because it never has.
instead, give all the cells in the same column the same class name.
style as desired.

 

[Larry Lindstrom]

because it never has.
instead, give all the cells in the same column the same class name.
style as desired.

Thanks Richard:

Sorry about the delayed response. I've been called away on other
problems.

Figuring out regulatory hoops I need to jump through to export
software with crypto. The Botan crypto library can be downloaded and
used to build strong crypto by anybody in the world, including criminals
in terrorist countries?

Back to HTML.

Your advice also works like a charm. I've used ID and class to
select column styles in the CSS.

Thanks
Larry