logo标签列表

我应该使用<colgroup>和<col>吗？如果需要，为什么需要，如何使用？

htmlhtml-tablecolcolgroup
25

我一直在尝试正确使用colgroup和col标签，但是我不理解它们的目的或如何实现。我已经阅读了规范文档，但仍然感到困惑。

4
请注意，这不是一个论坛，而是一个问答网站。您必须在此处发布一个问题，并且如果您愿意，可以自己回答（在答案帖子中，而不是作为问题的一部分）。但问题应该是具体的。因此，请编辑您的问题，使其成为一个真正的问题，并在答案帖子中提供答案。 - unor
1
感谢该网站的管理员为我澄清了这个空间的意图。 - Roger G. Zapata
Roger，欢迎来到论坛。请注意正确的大小写。https://stackoverflow.com/help/quality-standards-error - John Bentley
2个回答
19
colgroup元素用于在table元素中处理具有不规则表头的复杂层次结构信息。WAI有一篇完整的信息页面，介绍如何处理这种情况：带有不规则表头的表格并理解col和colgroup的使用。为了正确地将第一级标题与两列的所有单元格相关联，需要在表的开头定义列结构。每个列都由一个<col>元素标识，从左边开始。如果标题跨越两个或多个列，请使用<colgroup>元素而不是那些数量的<col>元素，并在属性中指定跨越的列数。然而，最好使用这些元素的用例是为样式化列而不重复使用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>

1
当包含colgroups和rowgroups时，我在屏幕阅读器（JAWS和NVDA）方面没有发现任何区别，与不包含它们相比。我正在使用WAI链接提供的示例。我唯一删除的是<col>和<colgroup>标签。我保留了适当的<th>，scope，rowspan和colspan，以便正确标记表格。colgroup对屏幕阅读器没有帮助。 - slugolicious
colgroup标签在这种情况下没有任何区别。您可以删除它并获得相同的结果。 - foolo
0

这就是为什么我们应该使用colgroup和col： 无论残疾人与否，每个人都能访问。

我编码已经有4个月了，我一直在阅读、观看教程、提问、再编码等等。我个人认为WWW应该面向所有人，而在学习的过程中，我发现HTML5是出于这个目的而生成的。几天前，我在编写一个表格时，遇到了之前从未见过的colgroup和col标签。起初我没有太在意，直到这些标签开始困扰我，它们为什么存在？我如何使用它们？是否必须声明它们？如果完全不使用它们会发生什么？

嗯，我个人喜欢了解事物的工作原理，所以我开始在网上进行研究，了解如何使用这些标签。我在很多博客中找到了很好的信息，但大部分信息都有些令人困惑。有些文章将这些标签描述为样式列的一种方式，其他文章则提到它们是在处理表格时更好的工作流程的一种方式，但有一个网站解释得很正确。最后，我明白了为什么、如何使用，并且我想与你分享这些信息。

colgroup标签用于声明表格中的一组列，而col标签用于声明单个列。根据W3C规范，col标签可以位于colgroup标签内部或外部，如果col标签位于colgroup标签内部，则colgroup标签不能具有span=""属性，因为col标签内部的span会覆盖它。

示例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节谈到了如何使用当前技术使信息对残疾人士易于访问。现在，想象一下一个视力不良的人，他/她必须依靠屏幕阅读器来获取网站上发布的信息，如果这个网站的表格标记错误...那么，用户将得到错误的信息或根本无法获得信息。这就是一个问题，W3C主任、万维网发明者蒂姆·伯纳斯-李（Tim Berners-Lee）对于网络的看法是：

网络的力量在于其普适性。每个人都能够访问，无论是否有残疾，这是一个重要方面。

因此，通过标记我们的内容，我们不仅使我们的内容可供所有人使用，还能获得许多好处：

对于可访问性，也存在着强有力的商业理由。可访问性与其他最佳实践重叠，如移动网页设计，设备独立性，多模态交互，易用性，面向老年用户的设计和搜索引擎优化（SEO）。案例研究表明，可访问性网站具有更好的搜索结果，降低的维护成本以及增加的受众覆盖等其他好处。为您的组织开发Web可访问性商业案例详细说明了Web可访问性的社会、技术、财务和法律利益。

先前的w3.org引用可以在这里找到：

除了colgroup和col之外，我们还应该使用其他标签（虽然不强制要求实现这一点，但作为网页开发人员，我认为我们有责任设计和实现适用于所有人的内容，无论他们的能力或缺乏能力如何）。像caption、thead和tbody等标签，我不打算在这里解释，因为网络上有很多好的文章可以参考。我对这篇文章的意图只是解释我在网上找不到的关于这些标签使用的一般说明（除了我之前提到的网站）。希望这些信息对某人有用，就像对我一样。
16
这个回答实际上并没有解释 col 或 colgroup 标签的用途。它们与可访问性没有比其他任何标签更相关。当然，确保你的标记不出错对于良好的可访问性非常重要，但包含 col 或 colgroup 标签并不能使表格具有可访问性。 - Ryan McCampbell
7
这是一个冗长的答案，除了基本上说“col”元素应该在“colgroup”内之外，实际上并没有解释任何东西。 - Andris
1
例子1中所描述的标签“良好使用”的内容存在错误。col元素应该是colgroup的子元素，而colgroup没有span属性，但在这个例子中，它却存在于colgroup之外。来源：https://html.spec.whatwg.org/multipage/tables.html#the-col-element - user3009344
我曾以为在colgroup内部需要使用col，但实际上如果你的表头足够“简单”且没有使用任何colspan，则会被标记为错误。 - JamesWilson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接