跳到主要内容

HTML table advanced features and accessibility

Adding a caption to your table with <caption>​

将<caption>嵌套到<table>里。

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

  ...
</table>

caption是显示的，对所有人有效，不只是残疾人。

备注

Note：还有一个summary属性可以在<table>里使用来对表格进行描述，但是已经过时了，会被阅读但是不能显示，推荐使用<caption>代替。

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

细分语义。 关于tbody即使你不使用，当你用开发者工具打开时会看到浏览器自动给你加上了。

    <table>
      <caption>
        How I chose to spend my money
      </caption>
      <thead>
        <tr>
          <th>Purchase</th>
          <th>Location</th>
          <th>Date</th>
          <th>Evaluation</th>
          <th>Cost (€)</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">SUM</td>
          <td>118</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Haircut</td>
          <td>Hairdresser</td>
          <td>12/09</td>
          <td>Great idea</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Lasagna</td>
          <td>Restaurant</td>
          <td>12/09</td>
          <td>Regrets</td>
          <td>18</td>
        </tr>
        <tr>
          <td>Shoes</td>
          <td>Shoeshop</td>
          <td>13/09</td>
          <td>Big regrets</td>
          <td>65</td>
        </tr>
        <tr>
          <td>Toothpaste</td>
          <td>Supermarket</td>
          <td>13/09</td>
          <td>Good</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>

Nesting Tables​

可以嵌套，但是不推荐。

<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>

title1title2title3
cell1cell2cell3
cell2cell3
cell4cell5cell6

嵌套出来就长这样。

Tables for visually impaired users​

有时候你可以一下找到重点，但是视觉障碍的人不行。

Using column and row headers第13已经讲过了​

The scope attribute​

scope属性用来告诉屏幕阅读器这个表题是一行的还是一列的。 例如每一列：

<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 还有两个可选的值： colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格，你会看到“衣物”单元格在“长裤”、“衬衫”和“裙子”单元格的上面。这几个单元格都应该被标记为表头（<th>），但是“衣物”是一个位于顶部且定义了其他三个子标题的表头。因此“衣物”应该有一个 scope="colgroup" 属性，而另外三个子标题应该有 scope="col" 属性。

The id and headers attributes​

如果要替代 scope 属性，可以使用 id 和 headers 属性来创建标题与单元格之间的联系。使用方法如下：

  1. 为每个 <th> 元素添加一个唯一的 id 。
  2. 为每个 <td> 元素添加一个 headers 属性。每个单元格的 headers 属性需要包含它从属于的所有标题的 id，之间用空格分隔开。

这会给你的 HTML 表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。

<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>