html - colgroup 和 col 的 span 属性

Question

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

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

和

<col span="7" />

和

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

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

score 6 · Accepted Answer

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

我读到它是说仅靠<col span="7" />它本身是无效的，但是：

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

是有效的，与以下相同：

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

但是，如果<colgroup>有一个span属性，那么它不应该有<col>孩子：

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

我的解释（基于HTML4 规范而不是更薄的 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 上对这些（尽管规范说什么）给予太多关注。

score 3 · Accepted Answer

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

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

Acolgroup表示一组一个或多个列，它span 指定列组中的列数。所以我认为它是一种捷径，免去了作者col连续写多个元素的麻烦。

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

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

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

另一方面，col表示列组中的一个或多个列，它span 指定COL元素“跨越”的列数……如果您问我，这是一个循环定义。

我能解释这一点的唯一方法是写

<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子项相同n。我认为没有逻辑或语义上的差异。

2 回答 2