Web可访问性是指以一种可以被视障人士轻松使用的方式设计Web应用程序。其中一些用户依靠屏幕阅读器来读出网页中的内容。屏幕阅读器解释页面上存在的代码并将其内容读出给用户。

<table>是一种广泛使用的HTML元素，用于在网页中以结构化方式显示数据。它的设计范围从简单到复杂，包括行标题，合并标题等。

如果表的设计没有考虑可访问性，则屏幕阅读器很难有意义地为用户翻译复杂表中的数据。因此，为了使复杂的HTML表更易于理解，为了便于访问，我们必须确保明确定义标题，列组，行组等。我们将在下面看到如何在标记中实现这一点。

范围属性

即使对于带有<th>明确定义标题的标记的简单表，您也可以使用scope属性改进其可访问性，而不是让位于单元格中类似数据类型可能引起的任何混淆。

scope属性有什么作用？根据W3C：

注意：此属性指定当前标题单元格为其提供标题信息的数据单元格集。

换句话说，它帮助我们将数据单元与其对应的标题单元相关联。

请注意，在上面的例子中，你可以切换<th>的<td>。只要它scope具有该值col，它将被解释为相应列的标题。

该scope属性可以包含以下四个值中的任何一个; col，row，rowgroup，colgroup指一个列的标题，一个行的标题，一组列的标头和一组行的分别标头。

复杂表格

现在让我们转到更复杂的表格。

上面是一个表格，列出了一个班级的学生，以及他们在三个科目的实践和理论上的成绩。

这是它的HTML代码。该表已使用rowspan和colspan创建数据单元格合并头。

在上表中，每个数据单元（即显示等级的每个表格单元格）与三条信息相关联：

• 这个年级属于哪个学生？
• 这个年级属于哪个科目？
• 这是实践或理论部分的成绩吗？

这三个信息在结构和视觉上以三种不同类型的标题单元格定义：

• 学生姓名
• 主题名称
• 实践或理论

让我们为可访问性定义相同的内容。

在上面的标记中，我们添加scope了包含有关数据单元格的标题信息的单元格。

列组

生物学，化学和物理学细胞将与每组两列相关联（理论与实践）。只是添加colspan="2"不会创建列组，它只表示特定单元格占用两个单元格的空间。

要创建列组，必须使用colgroup然后向其添加span属性，以指示列组包含的列数。

注意：您可以在本W3C文档中了解有关col和colgroup元素的更多信息。

在<th rowspan="2" scope="col">Student Name</th>与标记scope="col"有助于辅助技术鉴定，一个是遵循同一列的单元是学生的名字。

类似地，像<th colspan="2" scope="colgroup">Biology</th>包含的单元格scope="colgroup"可以帮助用户识别其跨越的列组中的单元格中的数据与该特定主题相关联。

然后是<th scope="row">John Doe</th>标记，scope="row"它定义了在同一行中跟随它的单元格，其中包含有关该特定学生姓名的“成绩” 信息。

行组

现在让我们转到另一个示例，这个示例将与上面的表几乎相同，除了我们将交换行和列标题，因此我们将能够使用行组。

既然我们已经有了样本，那么让我们开始创建行组，就像我们在上一个示例中为列组所做的那样。

但是，无法使用标记创建行组，colgroup因为没有rowgroup元素。

HTML行使用通常分组<thead>，<tbody>和<tfooter>元件。单个HTML <table>元素可以包含一个<thead>，一个<tfoot>和多个<tbody>。我们将tbody在表中使用多个来创建行组，并将相应的范围添加到标题单元格。

我们在每个tbody创建行组中添加了“Practical”和“Theory” 行，每行包含两行。我们还添加了scope="rowgroup"包含关于这两行的标题信息的单元格（在这种情况下，这是等级所属的主题名称）。