ヘッダー属性を使用する表のセルは、同じ表内のセルのみを参照する必要があります。

この問題を解決するには、 headers テーブルを使用する各セルが同じテーブル内の別のセルを参照するように、 scope 要素内の th 要素ごとに tr 属性値を作成します。このルールは、ヘッダー列と行への参照が特定の td 要素に接続されているかどうかをチェックします。

scope 属性は、列の下のすべてが上部のヘッダーに関連し、行ヘッダーの右側のすべてがそのヘッダーに関連することをブラウザーとスクリーンリーダーに伝えます。

scope属性をテーブルに適用すると、マークアップは次のようになります。

<table>
  <caption><strong>Greensprings Running Club Personal Bests</strong></caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">1 mile</th>
      <th scope="col">5 km</th>
      <th scope="col">10 km</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Mary</th>
      <td>8:32</td>
      <td>28:04</td>
      <td>1:01:16</td>
    </tr>

    <tr>
      <th scope="row">Betsy</th>
      <td>7:43</td>
      <td>26:47</td>
      <td>55:38</td>
    </tr>

    <tr>
      <th scope="row">Matt</th>
      <td>7:55</td>
      <td>27:29</td>
      <td>57:04</td>
    </tr>

    <tr>
      <th scope="row">Todd</th>
      <td>7:01</td>
      <td>24:21</td>
      <td>50:35</td>
    </tr>
  </tbody>

</table>

「 属性と id 属性を使用してデータ セルをデータ テーブル内のヘッダー セルに関連付ける headers 」を参照してください、データ テーブル内の1つ以上のヘッダー セルにデータ セルを接続する具体的な例については。

Name、1マイル、5 km、10 kmの上部ヘッダーはすべて th 要素でマークアップされており、Mary、Betsy、Matt、Toddの行ヘッダーも同様であることに注意してください。これらの各ヘッダー セルには、列ヘッダー セルか行ヘッダー セルかに応じて、 scope 属性値 col または row も与えられています。

colgroup 属性と rowgroup 属性の値 scope を使用することです、ヘッダー セルをデータ セルに関連付けるもう1つの方法は。このマークアップ手法は、複数の列または行にまたがるヘッダーを示すために使用されます。MozillaのLearn HTML Developer Docsにある次の表を検討してください。

<table>
  <caption>Items Sold August 2016</caption>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <th colspan="3" scope="colgroup">Clothes</th>
      <th colspan="2" scope="colgroup">Accessories</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <th scope="col">Trousers</th>
      <th scope="col">Skirts</th>
      <th scope="col">Dresses</th>
      <th scope="col">Bracelets</th>
      <th scope="col">Rings</th>
    </tr>
    <tr>
      <th rowspan="3" scope="rowgroup">Belgium</th>
      <th scope="row">Antwerp</th>
      <td>56</td>
      <td>22</td>
      <td>43</td>
      <td>72</td>
      <td>23</td>
    </tr>
    <tr>
      <th scope="row">Gent</th>
      <td>46</td>
      <td>18</td>
      <td>50</td>
      <td>61</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Brussels</th>
      <td>51</td>
      <td>27</td>
      <td>38</td>
      <td>69</td>
      <td>28</td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">The Netherlands</th>
      <th scope="row">Amsterdam</th>
      <td>89</td>
      <td>34</td>
      <td>69</td>
      <td>85</td>
      <td>38</td>
    </tr>
    <tr>
      <th scope="row">Utrecht</th>
      <td>80</td>
      <td>12</td>
      <td>43</td>
      <td>36</td>
      <td>19</td>
    </tr>
  </tbody>
</table>