Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why Isn't This <colgroup> Tag Working?

Reply
Thread Tools

Why Isn't This <colgroup> Tag Working?

 
 
Larry Lindstrom
Guest
Posts: n/a
 
      06-22-2012
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_htdocs...ng_tables.html

I appreciate the assistance knowledgeable people offer in this
newsgroup.

What am I doing wrong.

Thanks
Larry
 
Reply With Quote
 
 
 
 
Andreas Prilop
Guest
Posts: n/a
 
      06-22-2012
On Fri, 22 Jun 2012, Larry Lindstrom wrote:

> The issue today is the <colgroup> tag.


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

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell
 
Reply With Quote
 
 
 
 
Larry Lindstrom
Guest
Posts: n/a
 
      06-22-2012
On 6/22/2012 11:16 AM, Andreas Prilop wrote:
> On Fri, 22 Jun 2012, Larry Lindstrom wrote:
>
>> The issue today is the <colgroup> tag.

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


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-22-2012
2012-06-22 21:06, Larry Lindstrom wrote:

> 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
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_htdocs...ng_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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/


 
Reply With Quote
 
Larry Lindstrom
Guest
Posts: n/a
 
      06-22-2012
On 6/22/2012 11:51 AM, Jukka K. Korpela wrote:
> 2012-06-22 21:06, Larry Lindstrom wrote:
>
>> My CSS style isn't being applied to a column identified in the
>> <colgroup>.


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

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

Where can I find more about this?

I appreciate your advice Jukka.

Thanks
Larry


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-23-2012
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 current
http://67.171.145.190/htmldog_htdocs...ng_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

--
Yucca, http://www.cs.tut.fi/~jkorpela/


 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      06-23-2012
On Fri, 22 Jun 2012 11:06:42 -0700, Larry Lindstrom wrote:

> 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_htdocs...ng_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.
 
Reply With Quote
 
Larry Lindstrom
Guest
Posts: n/a
 
      06-28-2012
On 6/23/2012 4:19 AM, richard wrote:
> On Fri, 22 Jun 2012 11:06:42 -0700, Larry Lindstrom wrote:

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




 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
why why why why why Mr. SweatyFinger ASP .Net 4 12-21-2006 01:15 PM
why use fwd slash before closing of tag? " <tag /> " Aniais HTML 5 12-17-2006 01:40 AM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
how do u invoke Tag b's Tag Handler from within Tag a's tag Handler? shruds Java 1 01-27-2006 03:00 AM
Why <intput> tag overwrite the <td> tag RC XML 3 10-06-2005 04:27 PM



Advertisments