我应该使用 <colgroup> 和 <col>，如果是，为啥以及如何使用？

Posted 2023-03-21

【中文标题】我应该使用 <colgroup> 和 <col>，如果是，为啥以及如何使用？

【英文标题】：Should I use <colgroup> and <col>, and if so, why and how?我应该使用 <colgroup> 和 <col>，如果是，为什么以及如何使用？

【发布时间】：2017-06-14 07:27:57

【问题描述】：

我一直在尝试正确使用 colgroup 和 col 标签，但我不明白。我阅读了规范和所有内容，但我不明白它的目的或如何实现它。

【问题讨论】：

请注意，这不是一个论坛，而是一个问答网站。您必须在此处发布问题，如果需要，您可以自己回答（在回答帖子中，而不是作为问题的一部分）。但是一个问题应该是具体的。所以请edit你的问题，让它成为一个实际的问题，并在一个回答帖子中提供答案。

感谢网站版主向我阐明了这个空间的意图。

罗杰，欢迎来到论坛。请注意大小写正确。 ***.com/help/quality-standards-error

【参考方案1】：

这就是我们应该使用 colgroup 和 col 的原因： 无论残疾如何，都能接触到所有人。

过去 4 个月我一直在编码，我一直在阅读、观看教程、提问、再次编码等。我个人认为 WWW 必须适合所有人，在学习的同时我发现 html5 就是有这个意图的。几天前，我正在编写一个表格，我被介绍给我以前从未见过的标签，colgroup 和 col 标签。一开始我并没有太注意，直到这个标签开始困扰我，它为什么存在？我必须如何使用它？必须申报吗？如果我根本不使用它们会怎样？

嗯，我个人很想知道事情是如何运作的，所以我陈述了我的研究，在网上询问如何使用这些标签。我在很多博客中找到了很好的信息，但我发现的大多数信息都令人困惑。一些文章将这些标签作为一种设置列样式的方法，其他文章提到它们是一种在处理表格时拥有更好工作流程的方法，but there is a website that explained in the right way。我终于明白了为什么，如何，我只是想和你分享这个信息。

colgroup 标签是在表中声明一组列的方式，而 col 是声明单个列的方式。根据W3C specification，col标签可以在colgroup标签内也可以在colgroup标签外，如果col标签在colgroup标签内，那么colgroup标签不能有span=””属性，因为span在col标签内将覆盖它。

示例 1 - 善用 colgroup 和 col 标签。

<col>
<colgroup span="2"></colgroup>
<colgroup>
<col span="3">
</colgroup>

示例 2 – colgroup 和 col 标签的错误使用。

<col>
<colgroup span="2"><colgroup>
<colgroup span="2">
<col span="3">
</colgroup>

在示例 2 中，第二个 colgroup 被声明为跨越 2 列，但在内部声明了一个 col 标记，覆盖了此命令，现在告诉 UA 跨越 3 列而不是 2 列。为什么这是一个问题?正如我之前提到的，我想知道事情是如何运作的，所以研究我发现了一个叫做“section 508”的东西，它是前总统克林顿在 1998 年签署的“康复法案”的一部分，而这部分 508 谈到关于如何使用实际技术使残疾人可以访问信息。现在，想象一个无法正常看到的人，他/她必须通过屏幕阅读器来访问网站上发布的信息，这样的网站有一个表格，如果这个表格有错误的标记……那么，好吧用户会得到错误的信息，或者根本不会得到它。这就是一个问题，Tim Berners-Lee，W3C 主任和万维网的发明者在谈到网络时说：

网络的力量在于它的普遍性。每个人都可以访问 不论残疾是一个重要方面。

因此，通过标记我们的内容，我们不仅可以向所有人提供我们的内容，而且还可以获得很多好处：

还有一个强大的可访问性商业案例。可访问性 与其他最佳实践重叠，例如移动网页设计、设备 独立性、多模式交互、可用性、老年人设计 用户和搜索引擎优化 (SEO)。案例研究表明 可访问的网站具有更好的搜索结果，减少了维护 成本，增加受众范围，以及其他好处。发展 您的组织的 Web 可访问性业务案例详细说明了 Web 可访问性的社会、技术、财务和法律利益。

之前的w3.org引用找到here：

除了colgroup 和col 之外，我们还应该使用其他标签（这不是强制实现的，但作为网络开发人员，在我看来，我们有责任设计和实现所有人都可以使用的内容无论他们的能力或没有任何一个）喜欢，我不打算解释，因为有很多关于它的好文章。我写这篇文章的目的只是为了解释我在网上找不到的东西，作为对这些标签使用的一般解释（除了我之前提到的网站）。我希望这些信息对我有用。

【讨论】：

这个答案实际上并没有解释 col 或 colgroup 标签的用途。与其他任何标签相比，它们与可访问性无关。当然，确保您的标记没有损坏对于良好的可访问性很重要，但包含 col 或 colgroup 标记不会使表格可访问。

这是一个冗长的答案，除了基本上说 col 元素应该在 colgroup 内之外，并没有真正解释任何事情。

示例 1，描述为标签的“良好使用”，包含错误。 col 元素应该是 colgroup 的子元素，它没有 span 属性，但在示例中，它存在于它之外。来源：html.spec.whatwg.org/multipage/tables.html#the-col-element

我认为 col 内 colgroup 是一个要求，但如果你的表格标题足够“简单”并且你没有做任何 colspans，它实际上被标记为错误。跨度>

【参考方案2】：

colgroup 用于table 元素中，以帮助理解具有不规则标题的表格中复杂的信息层次结构。

WAI 有一个关于如何处理这种情况的完整信息页面： Tables with irregular headers并了解col和colgroup的用法

为了将一级表头与两列的所有单元格正确关联，需要在表格的开头定义列结构。 <col> 元素标识从左侧开始的每一列。如果标题跨越两列或更多列，请使用 <colgroup> 元素而不是 <col> 元素的数量，跨越的列数在 span 属性中注明。

话虽如此，这些元素的最佳用例是在不重复 style 或 class 属性的情况下设置列样式：

<table>
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:blue">
  </colgroup>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

【讨论】：

当包含 colgroups 和 rowgroups 与将它们排除在外时，我发现屏幕阅读器（JAWS 和 NVDA）没有区别。我正在使用提供的 WAI 链接中的示例。我唯一删除的是<col> 和<colgroup> 标签。我留下了正确的<th>、scopes、rowspans 和colspans，因此表格已正确标记。 colgroup 对屏幕阅读器没有帮助。

colgroup 标签在这种情况下没有任何区别。您可以删除它，结果相同。