我应该使用,如果是的话,为什么以及如何使用?

时间:2017-01-28 19:25:43

标签: html5 html-table col colgroup

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

有什么建议吗?

2 个答案:

答案 0 :(得分:10)

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

WAI有一个完整的信息页面,介绍如何处理这种情况: Tables with irregular headers并了解colcolgroup

的使用情况
  

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

话虽这么说,这些元素的最佳用例是样式列而不重复styleclass属性:

<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 :(得分:1)

这就是我们应该使用 colgroup col 的原因: 无论残疾人如何,都可以访问所有人。

我正在编写过去4个月的编码,我一直在阅读,观看教程,询问,编码等等。我个人认为 WWW 必须适合所有人,同时学习我发现HTML5是用这个意图制作的。几天前,我正在编写一个表格,我被介绍了一个我以前从未见过的标签,colgroupcol标签。一开始我没注意太多关注,直到这个标签开始打扰我,为什么它存在?我该如何使用它?声明它们是强制性的吗?如果我根本不使用它们会发生什么?

我个人想知道事情是如何运作的,所以我说我的研究在网上询问如何使用这些标签。我在很多博客中找到了很好的信息,但我发现的大部分信息都让人感到困惑。有些文章讨论了这些标签作为样式列的方式,其他文章提到它们是在使用表格时{(3}})使用更好的工作流程的一种方式。我终于明白了为什么,我和我只想和你分享这些信息。

colgroup标记是在表中声明一组列的方法,而col是声明单列的方法。根据{{​​3}},col标签可以在colgroup标签内部或外部,如果col标签位于colgroup标签内,则colgroup标签不能具有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。为什么这是一个问题?正如我之前提到的,我想知道事情是如何运作的,所以研究我发现了一些被称为“but there is a website that explained in the right way”的东西,它是前总统克林顿于1998年签署的“康复法案”的一部分,以及本节508讨论如何使用实际技术使残疾人可以访问信息。现在,想象一个看不清楚的人,他/她必须在屏幕阅读器上转发以访问网站上发布的信息,这样的网站有一个表格,如果这个表格有错误的标记......那么,那么用户将获取错误的信息或根本不会得到它。这是一个问题,W3C总监和万维网的发明者 Tim Berners-Lee 对网络说:

  

网络的力量在于它的普遍性。大家访问   无论残疾是一个重要方面。

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

  

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

之前发现的w3.org引用W3C specification

除了colgroupcol之外,我们还应该使用其他标签(实现这一点并不是强制性的,但作为Web开发人员,我认为,我们有责任设计和实施每个人都可以获得的内容,无论他们的能力如何,或者没有任何能力),并且我不会解释,因为有很多关于它的好文章。我对这个贡献的意图只是解释我在网上找不到的作为使用这些标签的一般解释(除了我之前提到的网站)。我希望这些信息对某些人来说可能对我有用。