HTML DOMのborderSpacingプロパティとは？テーブルセル間隔の設定方法をわかりやすく解説
HTML DOMのborderSpacingプロパティは、テーブルのセル同士の間隔（スペース）を設定したり、現在の値を取得したりするために使用されるプロパティです。JavaScriptから動的にセル間隔を変更したい場合に活用できます。
borderSpacingプロパティの構文
borderSpacingプロパティを設定する場合の基本的な構文は以下の通りです。
object.style.borderSpacing = "length length|initial|inherit";
指定できる値の一覧
| 値 | 説明 |
|---|---|
| length length | セル間のスペースを指定します。値を1つだけ指定した場合は、水平方向・垂直方向の両方に同じ間隔が適用されます。2つの値を指定した場合は、1つ目が水平方向の間隔、2つ目が垂直方向の間隔として設定されます。デフォルト値は「0」です。 |
| initial | このプロパティを初期値（デフォルト値）に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
borderSpacingプロパティの使用例
ここでは、ボタンをクリックするとテーブルのセル間隔が広がるサンプルコードを紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
table {
border: 3px solid black;
}
td {
border: 3px solid lightgreen;
}
th {
border: 3px solid lightblue;
}
</style>
<script>
function IncreaseBorderSpacing(){
document.getElementById("t1").style.borderSpacing="10px 10px";
document.getElementById("Sample").innerHTML="テーブルのボーダー間隔が広がりました";
}
</script>
</head>
<body>
<table id="t1">
<tr>
<th>果物</th>
<th>価格</th>
</tr>
<tr>
<td>マンゴー</td>
<td>40</td>
</tr>
<tr>
<td>りんご</td>
<td>50</td>
</tr>
</table>
<p>下のボタンをクリックすると、上のテーブルのボーダー間隔が広がります</p>
<button onclick="IncreaseBorderSpacing()">ボーダー間隔を広げる</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、初期状態ではセル同士が隣接したテーブルが表示されます。
その後、「ボーダー間隔を広げる」ボタンをクリックすると、JavaScriptによってborderSpacingプロパティが「10px 10px」に設定され、以下のようにセル間に余白が生まれます。
まとめ
borderSpacingプロパティを使えば、CSSを直接編集することなく、JavaScriptからテーブルのセル間隔を動的に制御できます。水平方向と垂直方向で異なる値を指定できるため、レイアウトの自由度も高く、インタラクティブなWebページ制作に役立つプロパティです。
-
HTML DOM の borderLeftWidth プロパティとは？使い方と設定例をわかりやすく解説
HTML DOM の borderLeftWidth プロパティは、要素の左側の境界線（ボーダー）の幅を設定または取得するために使用されるスタイルプロパティです。JavaScript から動的にボーダーの太さを制御したい場合に活用できます。 構文 borderLeftWidth プロパティを設定する場合の構文は以下のとおりです。 object.style.borderLeftWidth = thin|medium|thick|length|initial|inherit プロパティ値の一覧 borderLeftWidth プロパティに指定できる各値の意味は次のとおりです。 値説明 th
-
HTML DOMのborderSpacingプロパティとは？テーブルセル間隔の設定方法をわかりやすく解説
HTML DOMのborderSpacingプロパティは、テーブルのセル同士の間隔（スペース）を設定したり、現在の値を取得したりするために使用されるプロパティです。JavaScriptから動的にセル間隔を変更したい場合に活用できます。 borderSpacingプロパティの構文 borderSpacingプロパティを設定する場合の基本的な構文は以下の通りです。 object.style.borderSpacing = length length|initial|inherit; 指定できる値の一覧 値説明 length lengthセル間のスペースを指定します。値を1つだけ指定した場合