Span attribute on colgroup and col

Question

Are these codes logically equivalent?

<colgroup span="7">
</colgroup>

And

<col span="7" />

And

<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>

Will any attributes via HTML or properties via CSS have equal effect? Can sombody also add "colgroup" Tag. No enough rep for me to do that.

Answer 1

From the specification for <col>:

Contexts in which this element can be used:
As a child of a colgroup element that doesn't have a span attribute.
[...]
Content attributes: Global attributes
span

I read that as saying that just <col span="7" /> on its own is invalid but this:

<colgroup>
    <col span="7" />
</colgroup>

is valid and the same as:

<colgroup span="7">
</colgroup>

However, if the <colgroup> has a span attribute, then it should not have <col> children:

If the colgroup element contains no col elements, then the element may have a span content attribute specified...

My interpretation (based on the HTML4 specification more than the thinner HTML5 one) is that you would usually use <colgroup span="n"> unless you needed to style one of the columns in the group differently as in this (modified) example from the HTML4 specification:

<colgroup style="width: 20px; font-weight: bold;">
    <col span="39">
    <col id="format-me-specially" style="width: 35px;">
</colgroup>

so the first 39 columns would use whatever the <colgroup> specifies but the 40th could be tweaked. OTOH, I'm having trouble getting browsers to pay much attention to any of this (despite what the specs say) on jsfiddle.net so YMMV.

Answer 2

Here’s my interpretation of the specs. Update: After looking at the HTML4 specs, I’ve changed my mind about the colgroup element's span attribute.

(This is also in response to my own 2nd question comment in @mu’s answer.)

A colgroup represents a group of one or more columns, and its span specifies the number of columns in a column group. So I think of it as a shortcut, saving the author from writing multiple col elements in succession.

<colgroup class="x" span="3"></colgroup>

The column group spans over three columns and is styled according to the CSS rule .x {...}. This is equivalent to

<colgroup class="x">
    <col/>
    <col/>
    <col/>
</colgroup>

On the other hand, col represents one or more columns in the column group, and its span specifies the number of columns "spanned" by the COL element… which is a cyclical definition if you ask me.

The only way I can interpret this is that by writing

<colgroup class="x"><col class="y" span="3"/></colgroup>

you’re saying there are three columns, each in the same logical grouping, styled the same way according to .y {...}. This is a shortcut to writing

<colgroup class="x">
    <col class="y"/>
    <col class="y"/>
    <col class="y"/>
</colgroup>

Presentationally, I’m not sure there would be a noticeable difference. How it all looks depends on your CSS of course. But semantically, they are very different. The first example represents three groups of columns with each group containing one column, whereas the second example represents one group of three columns.

After rethinking this, I’ve decided that they’re both the same. Having a colgroup span n number of columns is the same as having one colgroup with a col child that spans n columns. There is no logical or semantic difference in my opinion.

Note: the col element must be contained in a colgroup element that has no span attribute. It may not be a direct child of the table element.