在本模块的第二篇文章中，我们将介绍 HTML 表格的一些更高级的功能（例如标题/摘要，将行分组为表格页眉、正文和页脚部分），以及查看视障用户对表格的可访问性。
先决条件： HTML 的基础知识（请参阅 HTML 简介）。
目的： 了解更高级的 HTML 表格功能以及表格的可访问性。
使用<标题向表格添加标题>
您可以通过将表放在<caption>元素中并将其嵌套在<table>元素中来为表添加标题。您应该将其放在开始标记的正下方。<table>
<table>
<caption>Dinosaurs in the Jurassic period</caption>
...
</table>
复制到剪贴板
从上面的简短示例中可以推断出，标题旨在包含对表内容的说明。这对于所有希望在扫描页面时快速了解表格是否对他们有用的读者都很有用，但对于盲人用户尤其如此。用户无需让屏幕阅读器读出许多单元格的内容，而只是要找出表格的内容，而是可以依靠标题，然后决定是否更详细地阅读表格。
标题直接放置在标记下方。<table>
注意：摘要属性也可以在元素上使用来提供描述 - 这也由屏幕阅读器读出。但是，我们建议改用该元素，因为HTML5规范已弃用，并且视力正常的用户无法阅读（它不会出现在页面上）。<table><caption>summary
主动学习：添加字幕
让我们尝试一下，重温我们在上一篇文章中首次遇到的一个例子。
从HTML Table Basics的末尾打开您的语言老师的学校时间表，或者制作我们的时间表固定.html文件的本地副本。
为表格添加合适的标题。
保存代码并在浏览器中打开它以查看其外观。
注意：你可以在GitHub上找到我们的版本——参见时间表标题.html（也看到现场直播）。
添加带有<thead>，<tfoot>和<tbody的结构>
由于表的结构变得更加复杂，因此为它们提供更多的结构定义是很有用的。执行此操作的一种明确方法是使用<thead>、<tfoot>和<tbody>，这允许您标记表的页眉、页脚和正文部分。
这些元素不会使屏幕阅读器用户更容易访问表格，也不会自行产生任何视觉增强。但是，它们对于样式和布局非常有用 - 充当将CSS添加到表中的有用钩子。为了给您一些有趣的示例，对于长表格，您可以使表格页眉和页脚在每个打印页面上重复，并且可以使表格正文显示在单个页面上，并通过上下滚动来提供内容。
要使用它们：
元素必须包装作为标题的表部分 — 这通常是包含列标题的第一行，但情况并非总是如此。如果您使用的是<col>/<colgroup>元素，则表头应位于这些元素的正下方。<thead>
该元素需要包装作为页脚的表部分 — 例如，这可能是最后一行，其中前几行中的项相加。您可以按预期将表页脚包含在表的底部，也可以在表头的正下方（浏览器仍会将其呈现在表的底部）。<tfoot>
该元素需要包装表头或页脚中不在其中的表内容的其他部分。它将出现在表头下方，有时显示在页脚下方，具体取决于您决定如何构建它。<tbody>
注意：始终包含在每个表中，如果您未在代码中指定它，则隐式包含该表。要检查这一点，请打开前面不包含的示例之一，然后查看浏览器开发人员工具中的HTML代码 - 您将看到浏览器已为您添加了此标记。您可能想知道为什么您应该费心将其包括在内 - 您应该这样做，因为它可以让您更好地控制桌子结构和样式。<tbody><tbody>
主动学习：添加表结构
让我们将这些新元素付诸行动。
首先，在新文件夹中创建支出记录.html和最小表.css的本地副本。
尝试在浏览器中打开它 - 你会看到它看起来还不错，但它可以得到改进。包含已花费金额总和的“SUM”行似乎位于错误的位置，并且代码中缺少一些详细信息。
将明显的标题行放在元素内，将“SUM”行放在元素内，将其余内容放在元素内。<thead><tfoot><tbody>
保存并刷新，您将看到添加元素导致“SUM”行下降到表的底部。<tfoot>
接下来，添加一个 colspan 属性以使“SUM”单元格跨越前四列，因此实际数字显示在“成本”列的底部。
让我们向表中添加一些简单的额外样式，以便您了解这些元素对于应用 CSS 的有用程度。在 HTML 文档的头部，您将看到一个空的 <style> 元素。在此元素中，添加以下 CSS 代码行：
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
复制到剪贴板
保存并刷新，并查看结果。如果 和 元素不在原位，则必须编写更复杂的选择器/规则来应用相同的样式。<tbody><tfoot>
注意：我们不希望您现在完全理解CSS。当您浏览我们的CSS模块时，您将了解有关此的更多信息（CSS简介是一个很好的起点;我们还有一篇专门介绍样式表的文章）。
完成的表应如下所示：
注意：你也可以在GitHub上找到它，因为它是支出记录完成的.html（另请参阅实时）。
嵌套表
可以将一个表嵌套在另一个表中，只要包含完整的结构（包括元素）即可。这通常并不真正建议，因为它使标记更加混乱，并且屏幕阅读器用户更难以访问，并且在许多情况下，您也可以将额外的单元格/行/列插入到现有表中。但是，有时这是必要的，例如，如果您想轻松地从其他来源导入内容。<table>
以下标记显示一个简单的嵌套表：
<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>
复制到剪贴板
其输出如下所示：
供视障用户使用的表格
让我们简要回顾一下如何使用数据表。表可以是一个方便的工具，让我们可以快速访问数据，并允许我们查找不同的值。例如，只需看一眼下表，即可了解 2016 年 8 月在根特售出的戒指数量。为了理解其信息，我们在此表中的数据与其列和/或行标题之间建立视觉关联。
2016 年 8 月售出商品
衣服 辅料
裤子 裙子 衣服 手镯 环
比利时 安特卫普 56 22 43 72 23
绅士 46 18 50 61 15
布鲁塞尔 51 27 38 69 28
荷兰 阿姆斯特丹 89 34 69 85 38
乌德勒支 80 12 43 36 19
但是，如果您无法进行这些视觉联想呢？那么你怎么能读懂像上面这样的表格呢？视障人士经常使用屏幕阅读器，向他们读出网页上的信息。当您阅读纯文本时，这没有问题，但是对于盲人来说，解释表格可能是一个相当大的挑战。然而，通过适当的标记，我们可以用编程关联替换视觉关联。
注意：根据世卫组织2017年的数据，约有2.53亿人患有视力障碍。
本文的这一部分提供了使表尽可能易于访问的进一步技术。
使用列标题和行标题
屏幕阅读器将识别所有标头，并使用它们在这些标头与它们相关的单元格之间建立编程关联。列标题和行标题的组合将标识和解释每个单元格中的数据，以便屏幕阅读器用户可以像视力正常的用户一样解释表格。
我们在上一篇文章中已经介绍了标头 — 请参阅添加包含第 <> 个元素的标头。
作用域属性
本文的一个新主题是 scope 属性，可以将其添加到元素中，以准确告诉屏幕阅读器标题是标题的单元格 - 例如，它是它所在的行的标题还是列的标题？回顾我们之前的支出记录示例，您可以明确地将列标题定义为列标题，如下所示：<th>
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>
复制到剪贴板
每行都可以有一个这样的标题定义（如果我们添加了行标题和列标题）：
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
复制到剪贴板
例如，屏幕阅读器将识别像这样结构的标记，并允许他们的用户一次读出整个列或整行。
scope还有两个可能的值 — 和 。这些用于位于多列或多行顶部的标题。如果您回头看本文开头的“2016 年 8 月售出的商品”表，您会看到“衣服”单元格位于“裤子”、“裙子”和“连衣裙”单元格上方。所有这些单元格都应标记为标题（），但“衣服”是位于顶部并定义其他三个副标题的标题。因此，“衣服”应获得属性 ，而其他“衣服”的属性应为 。colgrouprowgroup<th>scope="colgroup"scope="col"
id 和标头属性
使用该属性的替代方法是使用 id 和 headers 属性在标头和单元格之间创建关联。它们的使用方式如下：scope
向每个元素添加唯一元素。id<th>
向每个元素添加一个属性。每个属性都必须包含充当该单元格标题的所有元素的列表，以空格分隔。headers<td>headersid<th>
这为您的HTML表格提供了表格中每个单元格位置的显式定义，由它所属的每列和每行的标题定义，有点像电子表格。为了使其正常工作，该表确实需要列标题和行标题。
回到我们的支出成本示例，前两个片段可以这样重写：
<thead>
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
...
</tbody>
复制到剪贴板
注意：此方法在标头和数据单元格之间创建非常精确的关联，但它使用更多的标记，并且不会留下任何错误的余地。对于大多数表，此方法通常就足够了。scope
主动学习：玩转范围和标题
在最后一个练习中，我们希望您首先在新目录中制作已售项目的本地副本.html和最小表.css。
现在尝试添加适当的属性，以使此表更合适。scope
最后，尝试创建起始文件的另一个副本，这次使用 和 属性使表更易于访问。idheaders
注意：您可以根据我们完成的示例检查您的工作 - 请参阅项目 - 销售范围.html（另请参阅此实时）和项目 - 已售出标题.html（也请参阅此现场）。
总结
关于 HTML 中的表，您还可以了解其他一些内容，但这就是您现在需要了解的所有内容。接下来，您可以使用我们的 HTML 表格评估来测试自己。玩得愉快！
