tableObject.createTHead()は、表（table要素）のヘッダ（thead要素）を作成するメソッド。
構文
$tableElementReference.createTHead();
戻り値
作成したヘッダ（thead要素）、もしくは、既存のヘッダ（thead要素）。
例
var $createdTHead = $tableElementReference.createTHead(); // 表のヘッダ（thead要素）を作成
var $insertRow = $createdTHead.insertRow(0); // 作成したヘッダ（thead要素）に行（tr要素）を挿入
var $insertCell1 = $insertRow.insertCell(0); // 作成したヘッダ（thead要素）の行（tr要素）に１列目のセル（td要素）を挿入
$insertCell1.innerHTML = "ヘッダの１列目のセル"; // 作成したヘッダ（thead要素）の行（tr要素）の１列目のセル（td要素）の内容を指定
var $insertRow = $createdTHead.insertRow(0); // 作成したヘッダ（thead要素）に行（tr要素）を挿入
var $insertCell1 = $insertRow.insertCell(0); // 作成したヘッダ（thead要素）の行（tr要素）に１列目のセル（td要素）を挿入
$insertCell1.innerHTML = "ヘッダの１列目のセル"; // 作成したヘッダ（thead要素）の行（tr要素）の１列目のセル（td要素）の内容を指定
サンプル
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
サンプルの動作について
- 「作成」ボタンをクリックすると、表のヘッダ（thead要素）を作成する。既にヘッダがある場合は、ヘッダに新たな行を追加する。
- 「削除」ボタンをクリックすると、表のヘッダ（thead要素）を削除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $sampleCount = 0;
function sampleCreateTHead(){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
var $createdTHead = $sampleTable.createTHead();
var $insertRow = $createdTHead.insertRow(0);
var $insertCell1 = $insertRow.insertCell(0);
var $insertCell2 = $insertRow.insertCell(1);
var $insertCell3 = $insertRow.insertCell(2);
$insertCell1.innerHTML = "ヘッダ" + $sampleCount + "の１列目のセル";
$insertCell2.innerHTML = "ヘッダ" + $sampleCount + "の２列目のセル";
$insertCell3.innerHTML = "ヘッダ" + $sampleCount + "の３列目のセル";
}
function sampleDeleteTHead(){
var $sampleTable = document.getElementById( "sample" );
var $deletedCaption = $sampleTable.deleteTHead();
}
</script>
var $sampleCount = 0;
function sampleCreateTHead(){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
var $createdTHead = $sampleTable.createTHead();
var $insertRow = $createdTHead.insertRow(0);
var $insertCell1 = $insertRow.insertCell(0);
var $insertCell2 = $insertRow.insertCell(1);
var $insertCell3 = $insertRow.insertCell(2);
$insertCell1.innerHTML = "ヘッダ" + $sampleCount + "の１列目のセル";
$insertCell2.innerHTML = "ヘッダ" + $sampleCount + "の２列目のセル";
$insertCell3.innerHTML = "ヘッダ" + $sampleCount + "の３列目のセル";
}
function sampleDeleteTHead(){
var $sampleTable = document.getElementById( "sample" );
var $deletedCaption = $sampleTable.deleteTHead();
}
</script>
HTML
<p>
<button onclick="sampleCreateTHead()">作成</button>
<button onclick="sampleDeleteTHead()">削除</button>
</p>
<table id="sample">
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</table>
<button onclick="sampleCreateTHead()">作成</button>
<button onclick="sampleDeleteTHead()">削除</button>
</p>
<table id="sample">
<tr>
<td>１行目１列目</td>
<td>１行目２列目</td>
<td>１行目３列目</td>
</tr>
<tr>
<td>２行目１列目</td>
<td>２行目２列目</td>
<td>２行目３列目</td>
</tr>
<tr>
<td>３行目１列目</td>
<td>３行目２列目</td>
<td>３行目３列目</td>
</tr>
</table>
CSS
<style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>