我应该使用<colgroup>和<col>,如果是,为什么以及如何使用？

Question

我一直在尝试正确使用colgroup和col标签,但我没有得到它.我阅读了规范和所有这些,但我不明白它的目的或如何实现它.

有什么建议？

Answer 1

colgroup在table元素中使用A 来帮助理解具有不规则标题的表中的复杂信息层次结构.

该WAI有关于如何处理这种情况的完整信息页: 不规则头表格并了解使用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>

Answer 2

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

\n

我在过去 4 个月里一直在编码，我\xe2\x80\x99 一直在阅读、观看教程、提问、再次编码等等。我个人认为 WWW必须适合每个人，在学习时我发现 HTML5 是用那个意图。几天前，我在编写一个表格时，有人向我介绍了一个我以前从未见过的标签，即 thecolgroup和 thecol标签。一开始我并没有太在意\xe2\x80\x99，直到这个标签开始困扰我，为什么它存在？我必须如何使用它？必须申报吗？如果我根本不使用它们会发生什么？

\n

嗯，我个人喜欢知道事情是如何运作的，所以我在网上陈述了我的研究，询问如何使用这些标签。我在很多博客中找到了很好的信息，但我发现的大多数信息都有些令人困惑。一些文章讨论了这些标签作为设置列样式的一种方式，其他文章提到它们是一种在处理表格时获得更好的工作流程的方式，但有一个网站以正确的方式进行了解释。我终于明白了原因、方法，我只想与您分享这些信息。

\n

colgroup 标签是声明表中一组列的方法，而 col 是声明单个列的方法。根据W3C规范，col标签可以位于colgroup标签内部或外部，如果col标签位于colgroup标签内部，则colgroup标签可以\xe2\x80\x99t具有span=\xe2\x80\x9d\ xe2\x80\x9d 属性，因为 col 标记内的跨度将覆盖它。

\n

示例 1 \xe2\x80\x93 很好地使用了 colgroup 和 col 标签。

\n

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

\n

示例 2 \xe2\x80\x93 错误使用了 colgroup 和 col 标签。

\n

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

\n

在示例 2 中，第二个 colgroup 被声明为跨越 2 列，但在内部声明了一个 col 标签，该标签覆盖了此命令，现在告诉 UA 跨越 3 列而不是 2 列。为什么这是一个问题？正如我之前提到的，我想知道事情是如何运作的，因此研究后我发现了一些名为 \xe2\x80\x9c 第508 节\xe2\x80\x9d 的内容，它是 \xe2\x80\x9cRehabilitation Act\xe2 的一部分\x80\x9d 是前总统克林顿在 1998 年签署的，第 508 节讨论了如何使用实际技术使残疾人可以访问信息。现在，想象一个人无法正确看到\xe2\x80\x99，他/她必须通过屏幕阅读器才能访问网站上发布的信息，这样的网站有一个表格，如果该表格有错误的标记\xe2\x80\xa6 那么，用户将得到错误的信息，或者可能根本无法得到它。这\xe2\x80\x99是一个问题，W3C 总监兼万维网发明者蒂姆·伯纳斯·李 (Tim Berners-Lee)谈到网络时说道：

\n

\n

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

\n

\n

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

\n

\n

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

\n

\n

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

\n

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

\n