4

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jawad
  • 8,352
  • 10
  • 40
  • 45

2 Answers2

6

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.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
  • The browsres add the "colgroup" automatically even if we add a single "col", so it seems the "col" cannot exist of its own in a "table" and has to be a child of a "colgroup" regardless if you add it or not. Looks like they are just two ways of doing the same thing. Basically a HTML selector for "table columns" Thanks for the answer and you time. – Jawad Jun 13 '11 at 16:34
  • @Jawad: I wouldn't depend on the browsers adding anything (or, in general, being consistently sensible :) You're probably safer making sure your nesting is correct before the browser gets to it. – mu is too short Jun 13 '11 at 17:27
  • @ mu is too short: Yup you are right. Adding "colgroup" would just be safer. On a side note and completely off topic, does this "mu" in you name is the same "mu" as in Zen! i.e., as opposed to the Principal of Bivalence and Law of the Excluded Middle in Logic(Sombody asked a Zen Master. Does a dog have Zen? The Master replied, "mu"). – Jawad Jun 13 '11 at 18:21
  • @Jawad: I un-ask your question :) It actually comes from [Measure Theory](http://en.wikipedia.org/wiki/Measure_%28mathematics%29) though. – mu is too short Jun 13 '11 at 18:44
  • @muistooshort: I like your answer but it doesn't touch on the semantics (if any) of using `colgroup`s and `col`s. Is their sole purpose a shortcut for implementing styles? like `div` and `span`? What would be one's reasoning for using them *without* styles? – chharvey Jan 08 '12 at 06:12
  • @TestSubject528491: They allow you to make *logical* groupings of columns. Usually those logical groupings would be visually represented through styling but if you can't see then that styling won't help you. You can get the visual effect of `` without using `` but you'd lose the logical structure. A quick look at the [HTML4 sample table](http://www.w3.org/TR/html4/struct/tables.html#sample) might be enlightening. Also, keep in mind that software generally falls into the *can't see* category. – mu is too short Jan 08 '12 at 06:30
  • Ok, one more follow-up question: If the `span` attribute on the `colgroup` element represents the number of columns logically grouped together (as excellently illustrated in the HTML4 example you cited), then what does the `span` attribute on the `col` element represent? – chharvey Jan 11 '12 at 00:24
  • @TestSubject528491: I'm not certain off the top of my head. That would make a good question though and there are people here with more expertise in the HTML5 table model than I have :) – mu is too short Jan 11 '12 at 00:53
3

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.

chharvey
  • 8,580
  • 9
  • 56
  • 95
  • Thank you for your answer. Apart for the semantics point of view, I have not come accross any real world example other than it being used as an "unofficial" html Column selector. But offcouse, it also depends on the data itself. For example you can have a Address Column divided into Street, Area, Postal Code and so on Sub-Columns where the data has a natural link with each other and here you could use colgroup to group them. But since it's web designing and not RDBMS, it's quite useless! – Jawad Jan 20 '12 at 19:19
  • I understand your dissatisfaction. As of currently (January 2012; Google Chrome v 16), I can't do anything with CSS on the `colgroup` and `col` elements except change background color. I tried adjusting `width`, `color`, `font-size`, and many other properties, of no avail. Only `background-color` works. I haven't tried it on different browsers yet. Anyone following this, please reply back with more news if you have it. – chharvey Jan 22 '12 at 18:27
  • If a class is given, the sytles get applied - http://reference.sitepoint.com/html/colgroup – Jawad Jan 24 '12 at 11:40
  • Are you sure a `col` cannot be a direct child of a `table`? Here's a tutorial in which that is exactly the case, and the `span` attribute is used on `colgroup` elements. https://www.w3.org/WAI/tutorials/tables/irregular/ – Vun-Hugh Vaw Feb 19 '19 at 07:53
  • @Vun-HughVaw : Technically, a `col` element cannot be a direct child of a `table` element. [Content Model of `table`](https://www.w3.org/TR/html52/tabular-data.html#the-table-element): `col` elements are not allowed. [Contexts in which `col` may be used](https://www.w3.org/TR/html52/tabular-data.html#elementdef-col): only as a child of `colgroup`. **But here’s the catch:** there are some cases in which the start tag *and* end tag of `colgroup` may be omitted. So in markup, your `table` can *look* like it has a direct `col` child, but that's only because there’s an implied `colgroup`. – chharvey Feb 19 '19 at 13:52