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