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

来自规范：

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

是 本身是无效的，但这：

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

是有效的并且与：

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

但是，如果 有一个 span< /code> 属性，那么它应该没有 孩子：

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

我的解释（基于 HTML4 规范 比更薄的 HTML5 规范更多）是您通常会使用 除非您需要设计其中之一的样式组中的列与 HTML4 规范中的（修改后的）示例不同：

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

因此前 39 列将使用 指定的任何内容，但第 40 列可以进行调整。 OTOH，我很难让浏览器对 jsfiddle.net 上的所有这些（不管规范怎么说）给予太多关注，所以 YMMV。

Answer 2

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

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

colgroup 代表一个 一组或多列及其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 子级的 colgroup 是一样的代码>n列。我认为不存在逻辑或语义差异。

注意：col 元素必须包含在没有span属性的colgroup元素中。它可能不是 table 元素 的直接子元素。