可以使用表格

婴儿Boomerangutuang的图像。
婴儿Boomerangutuang,Tick的学生之一。他在大喊大叫玩娃娃没关系!

如果你在90年代甚至到了00年代都在努力构建网页,那么你可能学会了使用<表格>随着CSS支持和技术的发展,桌子d布局大多采用了字体元素。

人们似乎强烈反对桌子s、 然而,当它们在语义和结构上都合适时,许多开发人员甚至不会使用它们,例如标记表格数据。

这个W3C HTML5规范草案有一个非常简单的方法来限定桌子适合:

这个桌子元素以表的形式表示具有多个维度的数据。

要用另一种方式解释,如果要表示数据的列和行,则可能应该使用桌子。如果你发现你在使用图像或其他元素,那么你很可能做错了。

此外,使用其他元素表示表格数据意味着您可能会阻止已经有阅读表格经验的辅助软件用户以相同的方式访问信息。

下面是我经常看到的两种错误标记表的方法的示例。

表格作为图像

图片取代iPad上的桌子,第1部分。 图片取代iPad上的桌子,第2部分。 图片取代HTC Evo上的表格,第1部分。 图片取代HTC Evo上的表格,第2部分。
这些屏幕截图显示了使用Opera在iPad和Android Evo上查看每个表格时的显示方式。

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标签,这样我就可以在推特中获得促销表情符号:

使用#TheTick标签的推特截图,并显示相关的推特插入的营销表情符号。
表情符号有点酷。

4评论

答复

你好。

我必须显示3列3行带有描述的图像。

最好的方法是用桌子?

谢谢。

针对马塞洛·帕尔马·德·诺罗尼亚.答复

这取决于上下文。这真的是一个数据网格,像文件管理器视图吗?还是这更像是一个画廊?列和行的要求是来自设计还是因为行和/或列都有标签?

我的第一反应是,它可能不符合数据表的条件。

答复

我记得那条推文:)顺便说一句,我不同意你的观点,我更不同意你说这是一个HTML5误用问题。最终,这不再重要,因为文章已经不见了:(

作为对德里克·费瑟斯通.答复

啊,是的,你当时是对的,现在仍然是对的。这当然不是一个HTML5问题,只是一个HTML问题。

至于Netmag的……变化,我真的很高兴我拍了这篇文章的屏幕快照。要是没有必要就好了。

留言或回复

您可以使用这些HTML格式标记和属性:<a href=“”title=“”><abbr title=