thObject.headersは、表（table要素）における見出しセル（th要素）のheaders属性値を取得、もしくは、設定するプロパティ。
headers属性には、関連する見出しセル（th要素）のid属性値を指定できる。
構文
取得
$thElementReference.headers;
戻り値
headers属性値。関連する見出しセル（th要素）のid属性値。
設定
$thElementReference.headers = "ids";
- ids
- 関連する見出しセル（th要素）のid属性値。スペース区切りで、複数の見出しセル（th要素）のid属性値指定することもできる。
サンプル
カーソルを合わせた見出しセル（th要素）のheaders属性値：
| ヘッダ１－１ | ヘッダ１－２ | ヘッダ１－３ |
|---|---|---|
| ヘッダ２－１ | ヘッダ２－２ | ヘッダ２－３ |
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
サンプルの動作について
表の背景色が薄い青色の２行目の見出しセル（th要素）にカーソルを合わせると、その見出しセル（th要素）の背景色を黄色にする。「カーソルを合わせた見出しセル（th要素）のheaders属性値：」の右横に、カーソルを合わせた見出しセル（th要素）のheaders属性値を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
var $sampleCells = $sampleRows[1].cells;
for ( var $cellIndex = 0; $cellIndex < $sampleCells.length; $cellIndex++ ) {
$sampleCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.headers;
};
$sampleCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
window.onload = function(){
var $sampleRows = document.getElementById( "sample" ).rows;
var $sampleCells = $sampleRows[1].cells;
for ( var $cellIndex = 0; $cellIndex < $sampleCells.length; $cellIndex++ ) {
$sampleCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
document.getElementById( "sampleOutput" ).innerHTML = this.headers;
};
$sampleCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
};
}
}
</script>
HTML
<p>
カーソルを合わせた見出しセル（th要素）のheaders属性値：<span id="sampleOutput"></span>
</p>
<table id="sample">
<tr>
<th id="sampleHeader1">ヘッダ１－１</th>
<th id="sampleHeader2">ヘッダ１－２</th>
<th id="sampleHeader3">ヘッダ１－３</th>
</tr>
<tr>
<th headers="sampleHeader1">ヘッダ２－１</th>
<th headers="sampleHeader2">ヘッダ２－２</th>
<th headers="sampleHeader3">ヘッダ２－３</th>
</tr>
<tr>
<td headers="sampleHeader1">１行目１列目</td>
<td headers="sampleHeader2">１行目２列目</td>
<td headers="sampleHeader3">１行目３列目</td>
</tr>
<tr>
<td headers="sampleHeader1">２行目１列目</td>
<td headers="sampleHeader2">２行目２列目</td>
<td headers="sampleHeader3">２行目３列目</td>
</tr>
<tr>
<td headers="sampleHeader1">３行目１列目</td>
<td headers="sampleHeader2">３行目２列目</td>
<td headers="sampleHeader3">３行目３列目</td>
</tr>
</table>
カーソルを合わせた見出しセル（th要素）のheaders属性値：<span id="sampleOutput"></span>
</p>
<table id="sample">
<tr>
<th id="sampleHeader1">ヘッダ１－１</th>
<th id="sampleHeader2">ヘッダ１－２</th>
<th id="sampleHeader3">ヘッダ１－３</th>
</tr>
<tr>
<th headers="sampleHeader1">ヘッダ２－１</th>
<th headers="sampleHeader2">ヘッダ２－２</th>
<th headers="sampleHeader3">ヘッダ２－３</th>
</tr>
<tr>
<td headers="sampleHeader1">１行目１列目</td>
<td headers="sampleHeader2">１行目２列目</td>
<td headers="sampleHeader3">１行目３列目</td>
</tr>
<tr>
<td headers="sampleHeader1">２行目１列目</td>
<td headers="sampleHeader2">２行目２列目</td>
<td headers="sampleHeader3">２行目３列目</td>
</tr>
<tr>
<td headers="sampleHeader1">３行目１列目</td>
<td headers="sampleHeader2">３行目２列目</td>
<td headers="sampleHeader3">３行目３列目</td>
</tr>
</table>
CSS
<style>
#sample {
background-color: white;
}
#sample tr,
#sample td {
font-size: inherit !important;
color: inherit !important;
background-color: inherit;
}
#sample th {
font-size: inherit !important;
color: inherit !important;
background-color: lightblue;
}
</style>
#sample {
background-color: white;
}
#sample tr,
#sample td {
font-size: inherit !important;
color: inherit !important;
background-color: inherit;
}
#sample th {
font-size: inherit !important;
color: inherit !important;
background-color: lightblue;
}
</style>