Question

这些代码在逻辑上是否相同？

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

和

<col span="7" />

和

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

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

Answer 1

可以使用此元素的上下文：
  作为没有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>

我能解释的唯一方法是写作

<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的{{1}}列相同。我认为没有逻辑或语义差异。