桌子

表格是显示表格数据的推荐方式。表格式数据是最好在两个维度中导航的任何数据:在这两个维度上,既有沿列的垂直关系,也有沿行的水平关系。然而,表格并不是一个好的布局方式。

编码良好的表格对于屏幕阅读器用户来说很重要,这样他们就可以阅读、导航和理解数据。

使用divs和CSS公司CSS公司 CSS是级联样式表的缩写。这是控制网站设计或外观的因素。这将使屏幕阅读器用户更难理解数据。

示例

顶部

错误:表格纯粹用于布局

//不正确:不要仅将表格用于布局,例如在表单中。<表格><tr><td>网站标题<td><input name=“blogname”type=“text”id=“blognname”value=“”/></td></tr>[……等…]</表格>

顶部

错误:divs显示表格信息

//错误:不要使用无意义的div来显示有意义的数据。<div>欧洲WordCamp城市<div class=“row”><div class=“cell1”><strong>年份</strong></div><div class=“cell2”><strong>城市</strong></div></div>2017年巴黎2018年贝尔格莱德</div>

顶部

正确:显示表格信息的表格

//最基本形式的数据表。<表格>欧洲WordCamp城市年城市2017年巴黎2018年贝尔格莱德</表格>

标题标题 你网站的标题通常是人们第一次体验到的东西。位于页面顶部的刊头或页眉是网站外观的一部分。它可以影响访问者对您的内容和您/您组织的品牌的看法。它在不同的屏幕尺寸上也可能看起来不同。单元格必须标记为<th>,和数据单元格<td>。对于更复杂的表,您可能需要头部,科尔集团,行组,范围,身份证件和标头属性。这个W3C公司W3C公司 万维网联盟(W3C)是一个国际社区,成员组织、全职员工和公众共同努力制定网络标准。https://www.w3.org/.WAI有一个关于如何创建复杂的表.

顶部

标题还是摘要?

  • 标题的作用类似于表的标题
  • 使用<摘要>在一个<表格>HTML5中已弃用,不应再使用。

顶部

我们可以使用角色=演示吗?

是的,您可以使用ARIA属性角色=演示告诉屏幕阅读器用户这不是一个数据表,让它像文本一样读出。

这行得通,但不要使用ARIA来修复损坏的HTML5。这是一种黑客行为,而不是最佳实践。

顶部

复杂性

经验法则是:越简单越好。如果您的表非常复杂,请考虑将其拆分为多个表,或者找到不同的方式来组织数据。对于视力正常的用户来说,它可能也更容易阅读。

顶部

资源

顶部

响应表

表格的主要限制之一是很难做出响应。有很多方法可以做到这一点,同时保持可达性无障碍 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人的辅助技术(例如计算机屏幕阅读器)兼容。(https://en.wikipedia.org/wiki/Accessibility网站).

上次更新时间: