diff --git a/files/zh-cn/learn/html/tables/advanced/index.md b/files/zh-cn/learn/html/tables/advanced/index.md index 4d891d8319d060..484e3b0d0d8bda 100644 --- a/files/zh-cn/learn/html/tables/advanced/index.md +++ b/files/zh-cn/learn/html/tables/advanced/index.md @@ -1,11 +1,11 @@ --- -title: HTML 表格高级特性和无障碍 +title: HTML 表格进阶特性和无障碍 slug: Learn/HTML/Tables/Advanced --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -这个模块的第二篇文章中，我们来看一下 HTML 表格更高级的功能，比如表格的标题、摘要，以及将你表格中的各行分组成表头、表体、表尾三部分，以及为视力受损的用户提高表格的无障碍性。 +本模块的第二篇文章中，我们来看一下 HTML 表格更进阶的特性，比如表格的标题、摘要，以及将表格中的各行分组成表头、表体和表尾三部分，以及为视力受损的用户提供表格无障碍。 @@ -13,14 +13,12 @@ slug: Learn/HTML/Tables/Advanced - +
前提： HTML 的基础知识（参见 - HTML 简介）。 + HTML 简介）。
目标：学习 HTML 表格进一步的功能，以及表格的无障碍访问性。学习 HTML 表格更进阶的特性，以及表格无障碍。
@@ -43,30 +41,31 @@ slug: Learn/HTML/Tables/Advanced 标题就放在 `` 标签的下面。 -> **备注：** [`summary`](/zh-CN/docs/Web/HTML/Element/table#summary) 属性也可以在 `
` 元素中使用，用来提供一段描述，同样可以被屏幕阅读设备阅读。我们推荐使用 `
` 元素来代替，因为 `summary` 已经废弃了，且不能被视力正常的用户阅读（它不会出现在页面上）。 +> [!NOTE] +> [`summary`](/zh-CN/docs/Web/HTML/Element/table#summary) 属性也可以在 `` 元素中使用，用来提供一段描述，同样可以被屏幕阅读设备阅读。我们推荐使用 `、\ 和 \ 结构 +## 添加 \、\ 和 \ 结构 -由于你的表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 {{htmlelement("thead")}}、{{htmlelement("tfoot")}} 和 {{htmlelement("tbody")}}，这些元素允许你把表格中的部分标记为表头、表尾、表体三部分。 +由于你的表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 {{htmlelement("thead")}}、{{htmlelement("tbody")}} 和 {{htmlelement("tfoot")}}，这些元素允许你把表格中的部分标记为表头、表体和表尾三部分。 这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。给你一些有趣的例子，在长表格的情况下，你可以在每个打印页面上使表格页眉和页脚重复，你也可以让表格的正文部分显示在一个单独的页面上，并通过上下滚动来获得内容。 -试着使用它们： +要使用它们，应按以下顺序排列： -- `` 元素必须包住表格中作为表头的部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 {{htmlelement("col")}}/{{htmlelement("colgroup")}} 元素，那么 `` 元素就需要放在它们的下面。 -- `` 元素需要包住表格中作为表脚的部分。一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将``放在表格的底部，或者就放在 `` 的下面。(浏览器仍将它呈现在表格的底部) -- `` 元素需要包住表格内容中不在表头或表尾的其他部分。它可以出现在表头的下方，或者有时出现在表脚下方，这取决于你如何安排它。 +- `` 元素必须包住表格的表头部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 {{htmlelement("col")}}/{{htmlelement("colgroup")}} 元素，那么 `` 元素就需要放在它们的下面。 +- `` 元素需要包住表格内容的主要部分，不是表头和表尾。 +- `` 元素需要包住表格的表尾部分。一般是最后一行，往往是对前面所有行的总结。 > **备注：** `` 总是包含在每个表中，如果你没有在代码中指定它，那就是隐式的。可以来验证一下，打开一个你之前没有包含 `` 的例子，然后在你的[浏览器开发者工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中观察你的代码，你会看到浏览器为你添加了这个标签。你也许会想问，为什么你应该在所有表中都需要这个元素，因为它可以让你更好地控制表格结构和样式。 @@ -98,123 +97,14 @@ slug: Learn/HTML/Tables/Advanced 你完成的表格应该如下所示： -```html hidden - - - - - My spending record - - - -
` 元素来代替，因为 `summary` 已经废弃了，且不能被视力正常的用户阅读（它不会出现在页面上）。 ### 动手练习：添加一个标题 我们来试试看吧，回顾一下我们在之前的文章中第一次遇到的例子。. -1. 打开你的语言老师的学校时间表，就是 [HTML 表格基础](/zh-CN/docs/Learn/HTML/Tables/Basics#动手练习：colgroup_and_col) 结尾中的例子，或者把 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) 文件复制到本地。 +1. 打开你的语言老师的学校时间表，就是 [HTML 表格基础](/zh-CN/docs/Learn/HTML/Tables/Basics#colgroup%20和%20col) 结尾中的例子，或者把 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) 文件复制到本地。 2. 为表格添加一个合适的标题。 3. 保存你的代码，然后用浏览器打开，看看你的表格是什么样的。 > [!NOTE] > 你也可以在 GitHub 上找到我们的版本 [timetable-caption.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/timetable-caption.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)）。 -## 添加 \
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- How I chose to spend my money -
PurchaseLocationDateEvaluationCost (€)
SUM118
HaircutHairdresser12/09Great idea30
LasagnaRestaurant12/09Regrets18
ShoesShoeshop13/09Big regrets65
ToothpasteSupermarket13/09Good5
- - -``` - -{{ EmbedLiveSample('动手练习：添加表格结构', '100%', 300) }} +{{ EmbedGHLiveSample('learning-area/html/tables/advanced/spending-record-finished.html', '100%', 400) }} > [!NOTE] -> 你也可以在 GitHub 上找到 [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)）。 +> 你也可以在 GitHub 上找到 [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html)。 ## 嵌套表格 -在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括 `` 元素。这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，无障碍性也降低了。以及在很多情况下，也许你只需要插入额外的单元格、行、列到已有的表格中。然而有时候是必要的，比如你想要从其他资源中更简单地导入内容。 +在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括 `
` 元素。这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，无障碍性也降低了。以及在很多情况下，也许你只需要插入额外的单元格、行和列到已有的表格中。然而有时候是必要的，比如你想要从其他资源中更简单地导入内容。 下面的代码演示了一个简单的嵌套表格： @@ -263,31 +153,28 @@ th { ## 对于视力受损的用户的表格 -让我们简要回顾一下如何使用数据表。一个表格可以是一个便利的工具，或者让我们快速访问数据，并允许我们查找不同的值。比如，你只需要稍微看一眼下列的表格，你就能得知 2016 年 8 月份在 Gent 出售了多少个戒指。为了理解信息，我们让数据与列标题或行标题之间建立视觉联系。 +让我们简要回顾一下如何使用数据表。一个表格可以是一个便利的工具，或者让我们快速访问数据，并允许我们查找不同的值。比如，你只需要稍微看一眼下列的表格，你就能得知 2016 年 8 月份在根特出售了多少个戒指。为了理解信息，我们让数据与列标题或行标题之间建立视觉联系。
- - + + - - + - - + + - + @@ -295,7 +182,7 @@ th { - + @@ -303,7 +190,7 @@ th { - + @@ -312,7 +199,7 @@ th { - + @@ -320,7 +207,7 @@ th { - + @@ -350,11 +237,11 @@ th { ```html - - - - - + + + + + ``` @@ -363,49 +250,82 @@ th { ```html - - + + - + ``` 屏幕阅读器会识别这种结构化的标记，并一次读出整列或整行。 -`scope` 还有两个可选的值： `colgroup` 和 `rowgroup`。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格，你会看到“衣物”单元格在“长裤”、“衬衫”和“裙子”单元格的上面。这几个单元格都应该被标记为表头（` + + + + + + + + + +``` + +这同样适用于多个分组行的标题。再看看“2016 年 8 月出售的物品”表格，这次注意有“阿姆斯特丹”和“乌特勒支”标题（` + + + + + + + + + + + + +``` + +### id 和 headers 属性 -如果要替代 `scope` 属性，可以使用 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 和 [`headers`](/zh-CN/docs/Web/HTML/Element/td#headers) 属性来创建标题与单元格之间的联系。使用方法如下： +如果要替代 `scope` 属性，可以使用 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 和 [`headers`](/zh-CN/docs/Web/HTML/Element/td#headers) 属性来创建标题与单元格之间的联系。 -1. 为每个 ` - - - - - + + + + + + - - - - - + + + + + - - … ``` @@ -415,8 +335,8 @@ th { ### 动手练习：使用 scope 和 headers 1. 对于这个最后的练习，首先把 [items-sold.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold.html) 和 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/minimal-table.css) 复制到你的本地环境。 -2. 现在尝试添加适当的 `scope` 属性来让表格变得更加恰当。 -3. 最后，尝试把未添加 `scope` 属性的源文件再复制一份。这次使用 `id` 和 `headers` 属性让表格变得更加恰当。 +2. 现在尝试添加适当的 `scope` 属性来让表格变得更加易于访问。 +3. 最后，尝试把未添加 `scope` 属性的源文件再复制一份。这次使用 `id` 和 `headers` 属性创建精确、明确的关联，使表格变得更加易于访问。 > [!NOTE] > 你可以根据我们完成的例子检查你的工作，请看 [items-sold-scope.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-scope.html) ([also see this live](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) 和 [items-sold-headers.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-headers.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)）。
- 2016 年 8 月出售的物品 - 2016 年 8 月出售的物品
衣物 饰品
长裤 衬衫 裙子 手镯 戒指
比利时Antwerp安特卫普 56 22 4323
Gent根特 46 18 5015
Brussels布鲁塞尔 51 27 38
荷兰Amsterdam阿姆斯特丹 89 34 6938
Utrecht乌特勒支 80 12 43
PurchaseLocationDateEvaluationCost (€)购买位置时间评价成本 (€)
HaircutHairdresser理发理发店 12/09Great idea好主意 30
`），但是“衣物”是一个位于顶部且定义了其他三个子标题的表头。因此“衣物”应该有一个 `scope="colgroup"` 属性，而另外三个子标题应该有 `scope="col"` 属性。 +`scope` 还有两个可选的值： `colgroup` 和 `rowgroup`。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格，你会看到“衣物”单元格在“长裤”、“裙子”和“连衣裙”单元格的上面。这几个单元格都应该被标记为表头（``），但是“衣物”是一个位于顶部且定义了其他三个子标题的表头。因此“衣物”应该有一个 `scope="colgroup"` 属性，而另外三个子标题应该有 `scope="col"` 属性： -### id 和标题属性 +```html +
衣物
长裤裙子连衣裙
`）的行。可以看到“荷兰”标题，标记为 `` 元素，跨越了两行，是其他两个子标题的标题。因此，应在此标题单元格中指定 `scope="rowgroup"` ，以帮助屏幕阅读器创建正确的关联： + +```html +
荷兰阿姆斯特丹893469
乌特勒支801243
` 元素添加一个唯一的 `id` 。 -2. 为每个 `` 元素添加一个 `headers` 属性。每个单元格的 `headers` 属性需要包含它从属于的所有标题的 id，之间用空格分隔开。 +`headers` 属性包含一个空格分隔的无序字符串列表，每个字符串对应 `` 元素的唯一 `id`，这些 `` 元素为数据单元格（`` 元素）或另一个标题单元格（`` 元素）提供标题。 -这会给你的 HTML 表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。 +这样，HTML 表格就明确定义了表格中每个单元格的位置，这些单元格由其所属的每列和每行的标题定义，有点像电子表格。为使其运行良好，表格确实需要列标题和行标题。 -回到我们的花费成本示例，前两个片段可以重写为： +回到“2016 年 8 月出售的物品”示例，可以使用 id 和 headers 属性： + +1. 为每个 `` 元素添加一个唯一的 `id`。 +2. 为每个作为子标题（即在其上方有一个标题元素）的 `` 元素添加一个 `headers` 属性。其值是位于顶部并定义子标题的标题 `id`，在我们的示例中，列标题为 "衣物"，行标题为 "比利时"。 +3. 为每个 `` 元素添加一个 `headers` 属性，并以空格分隔的列表形式添加相关联的 `` 元素的 `id`。像在电子表格中一样进行操作： 找到数据单元格，然后搜索行和列的相应标题。 指定 id 的顺序并不重要，但应保持一致，使其井井有条。 ```html
PurchaseLocationDateEvaluationCost (€)衣物
长裤裙子连衣裙
HaircutHairdresser12/09Great idea30比利时安特卫普562243