可以使用表格
如果你在90年代甚至到了00年代都在努力构建网页,那么你可能学会了使用<表格>
随着CSS支持和技术的发展,桌子
d布局大多采用了字体
元素。
人们似乎强烈反对桌子
s、 然而,当它们在语义和结构上都合适时,许多开发人员甚至不会使用它们,例如标记表格数据。
这个W3C HTML5规范草案有一个非常简单的方法来限定桌子
适合:
这个桌子
元素以表的形式表示具有多个维度的数据。
要用另一种方式解释,如果要表示数据的列和行,则可能应该使用桌子
。如果你发现你在使用图像或其他元素,那么你很可能做错了。
此外,使用其他元素表示表格数据意味着您可能会阻止已经有阅读表格经验的辅助软件用户以相同的方式访问信息。
下面是我经常看到的两种错误标记表的方法的示例。
表格作为图像
2月份.net杂志发布了一篇文章,将视频无缝传送到桌面和移动设备,其中包括浏览器和视频编解码器支持的两个表。这两张表没有使用桌子
然而。
相反,表格是以图像的形式呈现的,没有任何用处中高音
文本。虽然文章使用了HTML5图形
,没有任何内容可以以纯文本形式显示表格的内容。
当页面在移动设备上查看时,.net Magazine CMS(我在这里假设)的自动下采样文章的手机版导致图像完全无法辨认。传统HTML桌子
就不会有这个问题了。
当我的推文引起一些评论时,我想我是在说什么,尽管我不同意这是只是错误的alt文本:
到.net Magazine和作者的信用,图像在我提到它(你可以在评论中关注).
表格作为任何其他元素
我怀疑有些表是使用其他HTML元素组合在一起的,只是为了证明开发人员可以做到。毕竟,如果开发人员考虑内容的结构和语义意义,那么他们肯定不会使用div公司
和跨度
s标记表格数据。
为期两天的响应式web设计研讨会(Build Responsively)的网站包括哥伦布事件页面上的时间表。此时间表包括一列时间和一列会话。每列有一个标题,每行有交替的背景样式。在每一种视觉上,它都是一个数据表。
然而,在语义和结构上,它并不是这样编码的(这是我在试图打印页面). 这是一系列div公司
s和跨度
在一个有序列表中(我也看到用定义列表实现了这一点)。第一个项目符号甚至有类“标题”,这可能是一个很好的线索,说明整个列表可能是桌子
“标题”可以是第个
.
此代码块显示上下文的事件日程表HTML:
<ol><li class=“heading”>时间会话</li><li><div class=“time”>上午8:00</div>注册,咖啡</span></li><li><div class=“time”>上午9:00</div>响应式Web设计,101</span></li><li><div class=“time”>上午9:45</div>响应性计划;设计</span></li><li><div class=“time”>上午11:30</div><span class=“session”>取得良好开端</span></li><li><div class=“time”>中午<time datetime=“2012-07-09 12:00”>下午1:00</div>午餐(提供)</span></li><li><div class=“time”>下午1:15</div>下午课程,The Nitty Gritty</span></li><li><div class=“time”>下午5:30</时间></div><span class=“session”>开幕晚会,由GitHub主办</span></li></ol>
你可以看到PrintShame上有这个网站.
你能做什么
随着对手工HTML和CSS的大力推动,以及展示开发人员使用HTML5和各种技巧所能做的事情的强烈愿望,看看你发现自己正在标记的任何网格。如果您发现有数据列、数据行、行或列的标题,或者正在使用CSS表显示属性,那么您可能需要使用桌子
而不是。
更新日期:2012年1月3日
文章HTML5标题元素和标题解释说,随着HTML5对标题的接受标题
上的桌子
s、 现在可以使用您的数据了桌子
当通过屏幕阅读器访问时,将适合标题导航。
更新时间:2013年4月12日
莱昂妮·沃森(Léonie Watson)快速概述了如何使数据表可访问请访问.net Magazine。
更新日期:2013年10月21日
野外发现的另一个错误的例子是:
更新日期:2017年8月25日
好的,我主要是添加了Tick标签,这样我就可以在推特中获得促销表情符号: