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.

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
color is inherited from the <table>, etc. Nobody asks the opinion of the
poor lonesome <col>, if present.
>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:

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

2012-06-23 1:53, Larry Lindstrom wrote:
> 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 currenthttp://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).

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?

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.

Share This Page

Welcome to The Coding Forums!

Welcome to the Coding Forums, the place to chat about anything related to programming and coding languages.

Please join our friendly community by clicking the button below - it only takes a few seconds and is totally free. You'll be able to ask questions about coding or chat with the community and help others.
Sign up now!