HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説
HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。
captionSide プロパティの構文
captionSide プロパティを設定する際の基本構文は以下のとおりです。
object.style.captionSide = "top|bottom|initial|inherit"
設定できる値
| 値 | 説明 |
|---|---|
| top | キャプションを表の上に配置します。デフォルト値です。 |
| bottom | キャプションを表の下に配置します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
captionSide プロパティの使用例
以下の例では、初期状態でキャプションが表の下に表示されるよう CSS で設定し、ボタンをクリックすると JavaScript によってキャプションの位置が「上」に動的に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
#t1{
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid blue;
}
caption {
font-size: 24px;
font-weight: bold;
}
</style>
<script>
function changeCaptionPosition(){
document.getElementById("t1").style.captionSide="top";
document.getElementById("Sample").innerHTML="キャプションの位置が上に変更されました";
}
</script>
</head>
<body>
<table id="t1">
<caption>サンプルキャプション</caption>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>ここにデータが入ります</td>
<td>ここにデータが入ります</td>
</tr>
<tr>
<td>ここにデータが入ります</td>
<td>ここにデータが入ります</td>
</tr>
</table>
<p>下のボタンをクリックすると、上の表のキャプション位置が変更されます</p>
<button onclick="changeCaptionPosition()">キャプション位置を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後は、キャプションが表の下に表示されます。
「キャプション位置を変更」ボタンをクリックすると、次のようにキャプションが表の上へ移動し、メッセージが表示されます。
補足ポイント
- captionSide プロパティは、CSS の
caption-sideプロパティに対応する DOM プロパティです。 - キャプションの位置は垂直方向（上・下）のみ指定可能で、左右に配置することはできません。
- 主要なブラウザ（Chrome、Firefox、Safari、Edge など）で広くサポートされています。
-
HTML DOM テーブルの createCaption() メソッドの使い方を解説
HTML DOM のテーブルオブジェクトが持つ createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML 文書内のテーブルに追加するためのメソッドです。テーブルにタイトル(キャプション)を動的に付与したい場合に便利です。 構文 createCaption() メソッドの基本的な構文は以下のとおりです。 object.createCaption() 引数は不要で、呼び出すだけで対象のテーブルにキャプション要素が追加されます。すでにキャプションが存在する場合は、既存のキャプションが返されます。 createCaption() メソッドの使用例
-
HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説
HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。 captionSide プロパティの構文 captionSide プロパティを設定する際の基本構文は以下のとおりです。 object.style.captionSide = top|bottom|initial|inherit 設定できる値 値説明 topキャプションを表の上に配置します。デフォルト値です。 bottomキャプシ