HTML&CSS 高级表格 可访问性进阶

过度构造的表格将带来很大的可访问性问题。

这时，可以使用scope属性。

scope属性是应用于表头的，它有两个可选值：row和col。

一个例子如下：

HTML代码如下：

<table>      <caption>Train times and departures</caption>         <tr>             <td></td> <!-- empty cell in the top-right corner -->             <th scope="col">Departure Time</th>        <th scope="col">Platform</th>        <th scope="col">Buffet Coach</th>      </tr>      <tr>        <th scope="row">Southampton</th>        <td>13:03</td>         <td>12</td>         <td>Yes</td>       </tr>      <tr>         <th scope="row">Edinburgh</th>        <td>14:47</td>        <td>4</td>        <td>Yes</td>      </tr>      <tr>        <th scope="row">Newcastle</th>        <td>15:55</td>        <td>7</td>        <td>No</td>      </tr>    </table>

CSS代码如下：

table {        border-collapse: collapse;        border: 1px solid black;      }      th {        text-align: left;        border: 1px solid black;        padding: 0.2em;      }      td {        border: 1px solid black;        padding: 0.2em;      }