tableObject.tHeadは、表（table要素）のヘッダ（thead要素）への参照。
ヘッダ（thead要素）には、列のラベル（見出し）を示すセルを格納することが多い。
複数の行を、ヘッダ（thead要素）でブロック化することもできる。
構文
$tableElementReference.tHead;
例
$tableElementReference.tHead; // 表（table要素）のヘッダ（thead要素）への参照
$tableElementReference.tHead.rows[0].cells[0]; // ヘッダ内の１列目のセルへの参照
$tableElementReference.tHead.rows[0].cells[0]; // ヘッダ内の１列目のセルへの参照
サンプル
| 名前 | 算数 | 国語 |
|---|---|---|
| 太郎 | 95 | 76 |
| 次郎 | 88 | 80 |
| 花子 | 72 | 100 |
サンプルの動作について
- 「名前」のセルにマウスのポインタ（カーソル）を合わせると、１列目の全てのセルの背景色を黄色にする。マウスのポインタ（カーソル）を「名前」のセルから外すと、元の背景色に戻る。
- 「算数」のセルにマウスのポインタ（カーソル）を合わせると、２列目の全てのセルの背景色を黄色にする。マウスのポインタ（カーソル）を「算数」のセルから外すと、元の背景色に戻る。
- 「国語」のセルにマウスのポインタ（カーソル）を合わせると、３列目の全てのセルの背景色を黄色にする。マウスのポインタ（カーソル）を「国語」のセルから外すと、元の背景色に戻る。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $sampleTable = document.getElementById( "sample" );
var $sampleColgroup = $sampleTable.getElementsByTagName( "colgroup" )
var $sampleTHead = $sampleTable.tHead;
var $sampleTHeadCells = $sampleTHead.rows[0].cells;
for ( var $cellIndex = 0; $cellIndex < $sampleTHeadCells.length; $cellIndex++ ) {
$sampleTHeadCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
$sampleColgroup[this.cellIndex].style.backgroundColor = "yellow";
};
$sampleTHeadCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
$sampleColgroup[this.cellIndex].style.backgroundColor = "";
};
}
}
</script>
window.onload = function(){
var $sampleTable = document.getElementById( "sample" );
var $sampleColgroup = $sampleTable.getElementsByTagName( "colgroup" )
var $sampleTHead = $sampleTable.tHead;
var $sampleTHeadCells = $sampleTHead.rows[0].cells;
for ( var $cellIndex = 0; $cellIndex < $sampleTHeadCells.length; $cellIndex++ ) {
$sampleTHeadCells[$cellIndex].onmouseover = function(){
this.style.backgroundColor = "yellow";
$sampleColgroup[this.cellIndex].style.backgroundColor = "yellow";
};
$sampleTHeadCells[$cellIndex].onmouseout = function(){
this.style.backgroundColor = "";
$sampleColgroup[this.cellIndex].style.backgroundColor = "";
};
}
}
</script>
HTML
<table id="sample">
<caption id="sampleCaption">
２組のテスト結果
</caption>
<colgroup span="1" id="sampleColgroupName"></colgroup>
<colgroup span="1"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th>名前</th>
<th>算数</th>
<th>国語</th>
</tr>
</thead>
<tbody>
<tr>
<td>太郎</td>
<td>95</td>
<td>76</td>
</tr>
<tr>
<td>次郎</td>
<td>88</td>
<td>80</td>
</tr>
<tr>
<td>花子</td>
<td>72</td>
<td>100</td>
</tr>
</tbody>
</table>
<caption id="sampleCaption">
２組のテスト結果
</caption>
<colgroup span="1" id="sampleColgroupName"></colgroup>
<colgroup span="1"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th>名前</th>
<th>算数</th>
<th>国語</th>
</tr>
</thead>
<tbody>
<tr>
<td>太郎</td>
<td>95</td>
<td>76</td>
</tr>
<tr>
<td>次郎</td>
<td>88</td>
<td>80</td>
</tr>
<tr>
<td>花子</td>
<td>72</td>
<td>100</td>
</tr>
</tbody>
</table>
CSS
<style>
#sampleCaption {
font-size: inherit;
margin: 0px;
padding: 3px;
background-color: lightgreen;
}
#sample tr,
#sample th,
#sample td {
background-color: inherit;
font-size: inherit !important;
color: inherit !important;
}
#sample thead,
#sampleColgroupName {
background-color: lightblue;
}
</style>
#sampleCaption {
font-size: inherit;
margin: 0px;
padding: 3px;
background-color: lightgreen;
}
#sample tr,
#sample th,
#sample td {
background-color: inherit;
font-size: inherit !important;
color: inherit !important;
}
#sample thead,
#sampleColgroupName {
background-color: lightblue;
}
</style>