HTML DOM Table createTHead() メソッドの使い方を解説
createTHead() メソッドは、HTML DOM においてテーブル（table）オブジェクトに対して使用できるメソッドの一つです。このメソッドを呼び出すと、空の <thead> 要素が新しく生成され、HTML 文書内の対象テーブルに自動的に追加されます。テーブルに既に <thead> 要素が存在する場合は、新しく作成せずに既存の要素を返します。
構文
createTHead() メソッドの基本的な構文は以下の通りです。
object.createTHead()
引数は不要で、テーブルオブジェクトに対してそのまま呼び出すだけで動作します。戻り値として、作成または取得された <thead> 要素が返されます。
サンプルコード
ここでは、ボタンをクリックするとテーブルにヘッダー（<thead>）が追加される簡単なデモを紹介します。
例
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
caption {
color: #db133a;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM Table createTHead() Method Demo</h1>
<table border="2">
<tr>
<td>Name</td>
<td>Roll No.</td>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="create()" class="btn">Create Header</button>
<script>
function create() {
var tableHeader = document.querySelector('table').createTHead();
tableHeader.innerHTML = "Table Heading";
}
</script>
</body>
</html>
コードの解説
上記のサンプルでは、document.querySelector('table') でページ内のテーブル要素を取得し、そのまま createTHead() を呼び出しています。戻り値として得られた <thead> 要素の innerHTML に文字列を設定することで、ヘッダーの内容を表示させています。
実行結果
ページを開くと、名前と学籍番号（Roll No.）が表示されたシンプルなテーブルと、「Create Header」ボタンが配置されています。
「Create Header」ボタンをクリックすると、テーブルの先頭に新しいヘッダーが作成されます。
このように createTHead() メソッドを使えば、JavaScript から動的にテーブルのヘッダー部分を追加できます。同様のメソッドとして、フッターを作成する createTFoot() や、行を挿入する insertRow() なども用意されているため、組み合わせて使うことで柔軟なテーブル操作が可能になります。
-
HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説
HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。構文createTFoot() メソッドの基本的な構文は以下のとおりです。object.createTFoot()引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。createTFoot
-
HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説
HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC