colgroup 和 col 的 span 属性

Question

这些代码在逻辑上是等价的吗？

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

和

<col span="7" />

和

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

任何通过 HTML 的属性或通过 CSS 的属性是否具有相同的效果？也可以添加“colgroup”标签。没有足够的代表让我这样做。

Answer 1

来自specification for <col>：

可以使用此元素的上下文：
作为没有 span 属性的 colgroup 元素的子元素。
[...]
内容属性： 全局属性
跨度

我读到的意思是 <col span="7" /> 本身是无效的，但是这个：

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

有效且等同于：

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

但是，如果是<colgroup> has a span attribute，那么它就不应该有<col> 子代：

如果 colgroup 元素不包含 col 元素，则该元素可能具有指定的 span 内容属性...

我的解释（基于 HTML4 specification 而不是更薄的 HTML5 之一）是您通常会使用 <colgroup span="n"> 除非您需要对组中的列之一进行不同的样式设置，如在这个（修改的）示例中HTML4 规范：

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

所以前 39 列将使用 <colgroup> 指定的任何内容，但可以调整第 40 列。 OTOH，我很难让浏览器在 jsfiddle.net 上关注任何这些（尽管规范是这样说的）所以 YMMV。

Answer 2

这是我对规格的解释。 更新：查看 HTML4 规范后，我改变了对 colgroup 元素的 span 属性的看法。

（这也是对我自己在@mu的回答中的第二个问题评论的回应。）

colgroup 代表 group of one or more columns，它的 span specifies the number of columns in a column group。所以我认为它是一个捷径，让作者不用连续写多个col元素。

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

列组跨越三列，并根据 CSS 规则 .x {...} 设置样式。这相当于

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

另一方面，col 代表one or more columns in the column group，它的span specifies the number of columns "spanned" by the COL element...如果你问我，这是一个循环定义。

我能解释的唯一方法是写

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

你是说有三列，每一列都在同一个逻辑分组中，根据.y {...} 的样式相同。这是写作的捷径

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

目前，我不确定会有明显的不同。当然，这一切看起来如何取决于您的 CSS。但在语义上，它们是非常不同的。第一个示例表示三组列，每组包含一列，而第二个示例表示一组三列。

重新考虑后，我决定它们都是一样的。拥有一个colgroup 跨度n 列数与拥有一个colgroup 和一个跨越col 列的col 子级相同。我认为没有逻辑或语义上的差异。

注意：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。