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