HTMLTableCellElement: headers プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

headers は HTMLTableCellElement インターフェイスのプロパティで、この特定のセルにおける見出しである <th> 要素の ID のリストが入ります。

値

空白で区切られた ID の入った文字列。

例

この例では、表内で最後にクリックされたセルの ID を表示します。

HTML

html

<table>
  <thead>
    <tr>
      <th rowspan="2" id="h">宿題 (ID = h)</th>
      <th colspan="3" id="e">試験 (ID = e)</th>
      <th colspan="3" id="p">プロジェクト (ID = p)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="e1" headers="e">1 (ID = e1)</th>
      <th id="e2" headers="e">2 (ID = e2)</th>
      <th id="ef" headers="e">最終 (ID = ef)</th>
      <th id="p1" headers="p">1 (ID = p1)</th>
      <th id="p2" headers="p">2 (ID = p2)</th>
      <th id="pf" headers="p">最終 (ID = pf)</th>
    </tr>
    <tr>
      <td headers="h">15%</td>
      <td headers="e e1">15%</td>
      <td headers="e e2">15%</td>
      <td headers="e ef">20%</td>
      <td headers="p p1">10%</td>
      <td headers="p p2">10%</td>
      <td headers="p pf">15%</td>
    </tr>
  </tbody>
</table>
最後にクリックされたセルの見出しの ID: <output>なし</output>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

const table = document.querySelector("table");
const output = document.querySelector("output");

table.addEventListener("click", (ev) => {
  output.textContent = ev.target.headers ? ev.target.headers : "なし";
});

結果

仕様書

仕様書
HTML # dom-tdth-headers

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月19日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告