HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM テーブルの createCaption() メソッドの使い方を解説

HTML DOM のテーブルオブジェクトが持つ createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML 文書内のテーブルに追加するためのメソッドです。テーブルにタイトル(キャプション)を動的に付与したい場合に便利です。

構文

createCaption() メソッドの基本的な構文は以下のとおりです。

object.createCaption()

引数は不要で、呼び出すだけで対象のテーブルにキャプション要素が追加されます。すでにキャプションが存在する場合は、既存のキャプションが返されます。

createCaption() メソッドの使用例

ここでは、ボタンをクリックするとテーブルにキャプションが動的に追加されるサンプルコードを紹介します。

<!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 createCaption() 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 Caption</button>
<script>
    function create() {
        var tableCaption = document.querySelector('table').createCaption();
        tableCaption.innerHTML = "Student Data";
    }
</script>
</body>
</html>

コードの解説

このサンプルでは、document.querySelector('table') でページ内のテーブル要素を取得し、そのまま createCaption() を呼び出しています。生成されたキャプション要素には innerHTML を使って「Student Data」というテキストを設定しています。

実行結果

HTML DOM テーブルの createCaption() メソッドの使い方を解説

初期状態では、テーブルにはキャプションが表示されていません。

次に、「Create Caption」ボタンをクリックしてみましょう。

HTML DOM テーブルの createCaption() メソッドの使い方を解説

ボタンをクリックすると、テーブルの上部に赤色の「Student Data」というキャプションが動的に作成され、表示されていることが確認できます。

まとめ

createCaption() メソッドを使えば、JavaScript だけでテーブルにキャプションを簡単に追加できます。ユーザーの操作に応じてテーブルの説明文を動的に表示したい場合などに活用するとよいでしょう。

  1. HTML DOMのtagNameプロパティとは？要素のタグ名を取得する方法を解説

    HTML DOMのtagNameプロパティは、HTMLドキュメント内の指定した要素のタグ名（要素名）を文字列として返します。JavaScriptで要素の種類を判別したり、動的に処理を分岐させたりする際に役立つ基本的なプロパティです。 構文 tagNameプロパティの基本的な構文は以下の通りです。 element.tagName 押さえておきたいポイント HTMLドキュメントの場合：tagNameは常に大文字で返されます（例：<div>なら「DIV」）。 XMLドキュメントの場合：ソースコードに記述された元の大文字・小文字がそのまま保持されます。 nodeNameとの違い：no

  2. HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説

    HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。 captionSide プロパティの構文 captionSide プロパティを設定する際の基本構文は以下のとおりです。 object.style.captionSide = top|bottom|initial|inherit 設定できる値 値説明 topキャプションを表の上に配置します。デフォルト値です。 bottomキャプシ