Creating 万博体育官网网址 Tables
数据表

标记数据表

数据表的目的是在网格中显示表格信息,或矩阵,有列或行显示网格中的信息的意义用户可以直观地发现扫描表他们可以很快使视觉之间的关联表中的数据和他们的适当的行和/或列标题别人无法看到桌子上不能让这些视觉联想,所以必须使用适当的标记一个编程元素在表之间的联系当适当的HTML标记,屏幕阅读器的用户可以浏览数据表一个细胞,他们会听到列和行标头和他们说过话。

表标题

数据表经常有简短的描述性文本之前或之后的表显示的内容表本文应使用各自的表相关联<标题>元素的<标题>元素必须开始后的第一件事<表>标签。

<表>
<标题>雪莱的女儿< /标题>

虽然不是每个表必须有一个标题,标题通常是非常有用的如果存在,它应该关联表使用<标题>元素。

确定行和列标题

关键一步创建一个万博体育官网网址数据表指定行和/或列标题标记的< td >元素是用于细胞和表数据< th >元素是用于表标题单元格Going back to our original data table example, the column headers for this table are的名字,年龄,生日行标头杰基贝丝还要注意相关的标题。

雪莱的女儿
的名字 年龄 生日
杰基 5 4月5日
贝丝 8 1月14日

表头不应该是空的这是特别关心的左上的细胞表

将数据细胞与适当的标题

现在我们已经创建了头,我们需要把数据细胞与适当的标题。

范围属性

scope属性标识是否表标题是一个列标题或标题一行这是表的标记,使用范围属性:

<表>
<标题>雪莱的女儿< /标题>

< tr >
< th范围=“上校”名称> < / th >
< th范围=“上校”年龄> < / th >
< th范围=“上校”> < / th >生日
< / tr >

< tr >
< th范围= "行">杰基< / th >
5 < td > < / td >
< td > < / td > 4月5号
< / tr >

< tr >
< th范围= "行"贝思> < / th >
< td > 8 < / td >
< td > 1月14日< / td >
< / tr >

< /表>

范围属性告诉浏览器和屏幕阅读器,所有在一个列标题相关联范围=“上校”在这一列,一个细胞范围= "行"是一个标题这一行的所有细胞。

所有< th >元素通常总是有一个范围属性虽然屏幕阅读器可能正确猜测一个头是一个列标题或标题一行表布局的基础上,分配使得这个明确的范围。

张成的头

范围将即使表复杂多级标题(如跨越细胞)表标题的范围将适用于所有细胞的头了。

雪莱的女儿
的名字 年龄 生日
出生在 杰基 5 4月5日
贝丝 8 1月14日
通过婚姻 贝丝 8 1月14日

在这个例子中,“生”行标题行范围,一样的标题的名字杰基的细胞显示年龄会有3头——一个列标题(“年龄”)和两行标题(“出生”和“成龙”)屏幕阅读器将确定他们所有人,包括数据单元的内容(例如,它可能读”杰基年龄5 .”)。

请注意

尽管标准标记表多年,一些屏幕阅读器仍不完全支持水平跨越或多个的复杂表行和/或列标题在可能的情况下,尝试“平面化”表和避免跨越细胞和多级标题细胞。

id属性

细胞和标题关联数据的另一种方法是使用id属性这种方法一般不建议,因为范围通常是足够的对于大多数表,即使是复杂的和多层的头。

在极其复杂的表范围可能导致表头申请(或范围)细胞不头,有关呢id可以使用在这些情况下,id可能会使表技术万博体育官网网址,如果有多个行和/或列标题的阅读水平,它不太可能会功能万博体育官网网址或屏幕阅读器用户可以理解的。

使用这种方法,每个< th >被分配一个独特的id属性值然后,每一个< td >给定一个细胞内的表每个属性值相匹配< th > id单元格的值相关联由空格分隔的值,应该列在屏幕阅读器的顺序应该读他们如果使用标题/ id在上面的示例中,成龙的年龄可能标记的细胞< td头=“出生杰基时代”> 5 < / td >)。

再次,应该强调,这个方法比较复杂,使用更多的标记(和潜力成为破碎),和很少是必要的(使用范围)。

使用比例的大小,而不是绝对的大小

规则适用于布局表也适用于数据表让浏览器窗口确定表尽可能的宽度,减少所需的水平滚动的低视力如果单元格宽度需要定义,使用相对价值,这样一个百分比,而不是像素值通常定义单元格高度应避免细胞可以向下扩展以适应它的内容——尤其是有用的东西可能放大文本内容的用户提供低视力。

其他表标记

总结

总结的属性<表>标签可以用来提供一个汇总的数据表结构(不满足)支持汇总各不相同,但总的来说,它是特定屏幕阅读器(这不是万博体育官网网址任何人),不支持此外,总结属性不是html 5规范的一部分一般来说,如果一个表这么复杂,它需要一个解释它是如何的结构化,它可能不是很万博体育官网网址和应该被简化由于这些原因,我们不推荐使用的总结如果是使用,它决不能用于布局表。

thead、tfoot和身体

theadtfoot元素定义表格的页眉和页脚的行他们没有提供可访问性时使用的功能和一般只有一个长桌上打印头和/或英尺行重复每个打印页面的顶部或底部类似地,tbody元素定义了一个数据表格的主体内容(即任何不是thead或tfood)再一次,这个元素没有提供任何额外的可访问性的好处,但使用它是没有害处的表样式或其他原因。