html表的可访问性,HTML表格高级特性和可访问性

你可以为你的表格增加一个标题，通过[`

`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption "HTML  元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为  的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。")元素

~~~html

...

~~~

## 添加 thead,tfoot 和tbody结构

*  ``需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了[``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col "HTML  元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于元素内。")/[``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup "HTML 中的 表格列组(Column Group ) 标签用来定义表中的一组列表。")元素，那么``元素就需要放在它们的下面。

*  `

`需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将``放在表格的底部，或者就放在 `` 的下面。(浏览器仍将它呈现在表格的底部)

*  `

`需要嵌套在 table 元素中，放置在``的下面或者是 `` 的下面，这取决于你如何设计你的结构。(``放在``下面也可以生效.)

[spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html)

## 嵌套表格

只要你包含完整的结构，包括 `

## scope 属性

可以添加在`

`元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格

~~~html

PurchaseLocationDateEvaluationCost (€)

~~~

## id 和标题属性

如果要替代 `scope`属性，可以使用`[id](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-id)`和`[headers](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attr-headers)`属性来创造标题与单元格之间的联系

1. 为每个`

`元素添加一个 `id` (id 不能重复)。

2. 为每个 `

` 元素添加一个 `headers` 属性。每个 `headers`属性需要包含 th 元素的 `id`

~~~html

PurchaseLocationDateEvaluationCost (€)

HaircutHairdresser12/09Great idea30

...

~~~