20

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

4

2 回答 2

18

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

WAI 有一个关于如何处理这种情况的完整信息页面： 带有不规则标题的表格以及了解使用col和colgroup

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

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

<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>

于 2017-01-29T09:04:33.690 回答
1

这就是我们应该使用colgroup和col的原因：无论残疾如何，都可以访问每个人。

在过去的 4 个月里，我一直在编写代码，并且一直在阅读、观看教程、询问、再次编写代码等。我个人认为WWW必须适合所有人，并且在学习的过程中，我发现 HTML5 就是出于这种目的而制作的。几天前，我正在编写一个表格，我被介绍给一个我以前从未见过的标签，thecolgroup和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 列。为什么这是一个问题？正如我之前提到的，我想知道事情是如何运作的，所以研究我发现了一个叫做“<a href="http://accessiblehtml.sourceforge.net/accessible_tables.html#contents_item_2" rel="nofollow noreferrer" >“第 508 条”，这是前总统克林顿在 1998 年签署的“康复法案”的一部分，该第 508 条讨论了如何使用实际技术使残疾人可以访问信息。现在，想象一个无法正常看到的人，他/她必须在屏幕阅读器上进行中继才能访问网站上发布的信息，这样的网站有一个表格，如果这个表格有错误的标记……那么，用户会得到错误的信息，或者根本没有得到它。这是一个问题，Tim Berners-Lee，W3C 主任和万维网的发明者谈到网络：

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

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

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

以前的 w3.org 报价在这里找到：

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

于 2017-01-28T23:05:00.603 回答