HTML 表格的使用是为了以有组织的方式显示数据而保留的。数据 表格以网格形式呈现表格信息。它们由列和行组成 传达信息的含义。使用表代码是不合适的 控制网页布局或设计，因为这会给屏幕阅读器用户带来障碍。
视力正常的用户可以目视扫描表格，快速建立视觉关联 表中的数据与其相应的行和/或列标题之间。有人 看不到表格的人无法进行这些视觉关联，因此需要额外的标记 必须添加。
HTML 标记就位后，屏幕阅读器可以浏览数据表之一 一次一个单元格，他们会听到相应的列标题和行标题 他们。
表格标题
通常需要标题来描述表格中包含的数据。一种选择 是包括一个<h2>或<h3>标题直接位于表格之前。如果有<h2>或<h3>根据您的内容结构，标题没有意义，表格标题必须 而应包含在中<标题>元素。<标题>元素必须是开头之后的第一个元素<表>元素。
<表><标题>捐赠：工程学院</标题>. . .
行标题和列标题
可访问的数据表必须对行标题和/或列标题有明确的指定 这样屏幕阅读器就可以正确地传递信息。
识别标头
在您的代码中，<td>元素用于表格数据单元格和<第>元素用于表格标题单元格。您可以在列顶部使用标题 和/或在行的开头。如果一个元素是标题，则必须使用适当的<第>代码。
确定范围
除了使用<第>和<td>适当地，有必要确定标头的范围。 个人 视力正常的人可以辨别是否是：<第>对应于列或行。屏幕阅读器需要额外的范围属性 正确地传达这一点。使用范围=“col” 在列的任何标题元素中并使用范围=“行” 在行的任何标题元素中。
<table class="auto striped" style="min-width: 100%;"><标题>捐赠：工程学院</标题><标题><tr><thscope="col">部门</th><thscope="col">2014-15</th><thscope="col">2015-16</th><thscope="col">2016-17</th></tr></thead><tbody><tr><thscope="row">化学工程</th><td>$2,945,263</td><td>$3,160,000</td><td>$3,252,000</td></tr><tr><thscope="row">土木、环境和地理空间工程</th><td>$2,725,263</td><td>$3,160,521</td><td>$3,467,462</td></tr><tr><thscope="row">电气和计算机工程</th><td>$4,244,262</td><td>$5,160,563</td><td>$6,252,543</td></tr></tbody></表>
表格示例
使用正确的表格标题、标题和范围，我们的示例 Modern Campus CMS 表格 无论用户是否有能力或残疾，都在视觉上对用户有吸引力，包括那些 与屏幕阅读器。
表示例：标准足球比赛结果设计
| 部门 | 2014-15 | 2015-16 | 2016-17 |
|---|---|---|---|
| 化学工程 | $2,945,263 | $3,160,000 | $3,252,000 |
| 土木、环境和地理空间工程 | $2,725,263 | $3,160,521 | $3,467,462 |
| 电气和计算机工程 | $4,244,262 | $5,160,563 | $6,252,543 |
表格示例：非足球比赛结果设计
WebAIM 的无障碍表格教程展示了一些，不使用足球比赛结果的标准设计和样式。你的桌子可能看起来 有所不同，具体取决于您使用的网络系统以及应用的 CSS。
了解详情
要详细了解创建可访问表的原则：
现代校园 CMS
详细了解如何在 Modern Campus CMS 中创建无障碍表格以及选项 用于修改表格样式：