HTML table advanced features and accessibility

 

在本模块的第二篇文章中,我们将介绍HTML表的一些更高级的功能-例如标题/摘要,以及将行分组为表头,正文和页脚节-以及为视障用户提供表的可访问性.

Prerequisites: HTML的基础知识(请参阅HTML简介 ).
Objective: 了解更多高级的HTML表功能以及表的可访问性.

Adding a caption to your table with <caption>

您可以通过将表格标题放在<caption>元素中并将其嵌套在<table>元素中来为表格提供标题. 您应该将其放在开始的<table>标签下面.

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

从上面的简短示例可以推断,标题旨在包含对表内容的描述. 这对于希望快速了解表在他们扫描页面时是否对他们有用的所有读者特别有用,特别是对于盲人用户. 屏幕阅读器不必让屏幕阅读器读取许多单元格的内容来查找表的内容,而是可以依靠标题,然后决定是否更详细地阅读表.

标题直接位于<table>标记下方.

注意summary属性也可以在<table>元素上使用以提供描述-屏幕阅读器也会读取该属性. 但是,我们建议改用<caption>元素,因为HTML5规范已弃用 summary ,并且有视力的用户无法阅读summary (该summary不会显示在页面上.)

Active learning: Adding a caption

让我们尝试一下,回顾一下我们在上一篇文章中首次遇到的示例.

  1. HTML Table Basics的结尾打开您的语言老师的上课时间表,或者在本地复制我们的table-fixed.html文件.
  2. 为表格添加适当的标题.
  3. 保存您的代码,然后在浏览器中将其打开,以查看其外观.

注意 :您可以在GitHub上找到我们的版本-请参阅timetable-caption.html另请参见直播 ).

Adding structure with <thead>, <tfoot>, and <tbody>

由于表的结构变得有些复杂,因此为它们提供更多的结构定义很有用. 一种清晰的方法是使用<thead><tfoot><tbody> ,它们允许您标记表的页眉,页脚和正文部分.

这些元素不会使屏幕阅读器用户可以更轻松地访问表格,也​​不会导致视觉效果的增强. 但是,它们对于样式和布局非常有用-充当将CSS添加到表中的有用钩子. 为了给您提供一些有趣的示例,如果表格较长,则可以使表格的页眉和页脚在每个打印页面上重复,并且可以使表格主体显示在单个页面上,并通过上下滚动来显示内容.

要使用它们:

  • <thead>元素必须包装表的一部分,即标头-通常是包含列标题的第一行,但不一定总是这样. 如果您使用的是<col> / <colgroup>元素,则表头应位于这些元素的正下方.
  • <tfoot>元素需要包装表的页脚部分-例如,这可能是最后一行,其中前几行的内容相加. 您可以根据需要在表的底部或表头的正下方添加表脚(浏览器仍将其呈现在表的底部).
  • <tbody>元素需要包装表内容的其他部分,这些部分不在表的页眉或页脚中. 它会显示在表格标题下方,有时也显示在页脚下方,具体取决于您决定如何构造它.

注意<tbody>始终包含在每个表中,如果您未在代码中指定它,则隐式包含. 要检查这一点,请打开您以前的不包含<tbody>示例,然后在浏览器开发人员工具中查看HTML代码-您将看到浏览器已为您添加了此标记. 您可能想知道为什么您应该费心将其包括在内-应该这样做,因为它使您可以更好地控制表的结构和样式.

Active learning: Adding table structure

让我们将这些新元素付诸实践.

  1. First of all, make a local copy of spending-record.html and minimal-table.css in a new folder.
  2. 尝试在浏览器中打开它-您会发现它看起来不错,但是可以改进. 包含已用金额总和的" SUM"行似乎在错误的位置,并且代码中缺少一些详细信息.
  3. 将明显的标题行放在<thead>元素内,将" SUM"行放在<tfoot>元素内,并将其余内容放在<tbody>元素内.
  4. 保存并刷新,您将看到添加<tfoot>元素已导致" SUM"行下降到表格底部.
  5. 接下来,添加colspan属性,以使" SUM"单元格跨前四列,因此实际数字显示在"成本"列的底部.
  6. 让我们向表中添加一些简单的额外样式,以使您了解这些元素对于应用CSS有多有用. 在HTML文档的头部内,您将看到一个空的<style>元素. 在此元素内,添加以下几行CSS代码:
      身体{
       字体大小:95%;
       字体样式:斜体;
     }
    
     foot脚{
       font-weight:粗体;
     }
    
  7. 保存并刷新,然后查看结果. 如果没有<tbody><tfoot>元素,则必须编写更复杂的选择器/规则才能应用相同的样式.

注意 :我们不希望您现在完全了解CSS. 当您遍历我们的CSS模块时,您将学到更多关于CSS的知识(CSS 简介是一个不错的起点;我们还有一篇专门关于样式表的文章).

完成的表应如下所示:

注意 :您也可以在Github上找到它,网址为expense-record-finished.html也可以在线观看 ).

Nesting Tables

只要您包含完整的结构(包括<table>元素),就可以将一个表嵌套在另一个<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>

其输出如下所示:

title1 title2 title3
cell1 cell2 cell3
cell2 cell3
cell4 cell5 cell6

Tables for visually impaired users

让我们简要回顾一下如何使用数据表. 表格可以是一个方便的工具,它使我们可以快速访问数据并允许我们查找不同的值. 例如,仅需短暂浏览一下下表,就能知道去年8月在根特售出了多少枚戒指. 为了了解其信息,我们在此表中的数据与其列和/或行标题之间建立了可视化关联.

2016年8月出售的物品
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
荷兰人 Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

但是,如果您无法进行视觉关联,该怎么办? 那你怎么能阅读上面的表格呢? 视障人士经常使用屏幕阅读器向他们朗读网页上的信息. 当您阅读纯文本时,这没问题,但是对于盲人来说,解释表格可能是一个很大的挑战. 但是,通过适当的标记,我们可以用程序化的视觉关联代替视觉关联.

:根据世界卫生组织2017年的数据,约有2.53亿视力障碍者.

本文的这一部分提供了使表尽可能可访问的其他技术.

Using column and row headers

屏幕阅读器将识别所有标头,并使用它们在这些标头及其相关的单元之间建立程序化关联. 列标题和行标题的组合将标识和解释每个单元格中的数据,以便屏幕阅读器用户可以类似于视力正常的用户来解释表格.

我们已经在上一篇文章中介绍了标头-请参阅使用<th>元素添加标头 .

The scope attribute

本文的一个新主题是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还有两个可能的值: colgrouprowgroup . 这些用于位于多列或多行顶部的标题. 如果您回顾一下本文本节开头的" 2016年8月售出的物品"表,则会发现"衣服"单元格位于"裤子","裙子"和"连衣裙"单元格上方. 所有这些单元格都应标记为标题( <th> ),但是"衣服"是一个位于顶部的标题,并定义了其他三个子标题. 因此,"衣服"应具有scope="colgroup"的属性,而其他服装将具有scope="col"的属性.

The id and headers attributes

使用scope属性的一种替代方法是使用idheaders属性在标题和单元格之间创建关联. 使用它们的方式如下:

  1. 您向每个<th>元素添加唯一的id .
  2. 您将headers属性添加到每个<td>元素. 每个headers属性必须包含所有<th>元素的id的列表,这些元素充当该单元格的标题,以空格分隔.

这为您的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方法通常对于大多数表来说就足够了.

Active learning: playing with scope and headers

  1. 对于本最终练习,我们希望您首先在新目录中制作items-sold.htmlminimal-table.css的本地副本.
  2. 现在尝试添加适当的scope属性,以使该表更合适.
  3. 最后,尝试制作启动文件的另一个副本,这次使用idheaders属性使表更易于访问.

注意 :您可以对照完成的示例检查您的工作—请参阅items-sold-scope.html另请参见本实时直播 )和items-sold-headers.html (也请参见本实时直播 ).

Summary

您还可以了解有关表HTML的其他一些信息,但是我们确实在此时提供了您需要了解的所有信息. 在这一点上,您可能想学习有关样式化HTML表的信息-请参阅样式表 .