border-spacingとは、HTMLの表（table）で、隣り合うセルとセルのあいだの間隔を調整するCSSプロパティです。かつてはHTMLのcellspacing属性で指定していましたが、現在はCSSのborder-spacingを使うのが正しい方法です。ポイントは、border-collapse: separate（セルの枠線を分離する設定）のときにだけ効くという点。この記事では、使い方・値の指定方法・つまずきやすい注意点までを解説します。
border-spacingとは？何を指定するプロパティか
border-spacingは、テーブル内のセル同士の間隔（すき間）を指定するプロパティです。table要素に対して指定します。値にはpxなどの長さ単位を使い、数値が大きいほどセル間のすき間が広がります。表全体の見た目を整えたいとき、セルがくっつきすぎている・離れすぎているといった調整に使います。
値の指定方法｜1値と2値
指定の仕方は2通りあります。用途に応じて使い分けます。
- 1値指定：
border-spacing: 5px;→ 上下・左右すべてに同じ間隔をつける - 2値指定：
border-spacing: 10px 5px;→ 1つ目が「左右方向」、2つ目が「上下方向」の間隔（半角スペース区切り）
横方向と縦方向で間隔を変えたいときは2値指定が便利です。
border-collapseとの関係が最重要
もっとも大切な注意点がこれです。border-spacingは、border-collapse: separateが指定されているときにだけ有効です。border-collapse: collapse（隣り合う枠線を1本に結合するモード）では効きません。「border-spacingを書いたのに間隔が変わらない」という場合、原因のほとんどはborder-collapseがcollapseになっていることです。
コード例
table { border-collapse: separate; border-spacing: 8px 4px; border: 1px solid #ccc;}td { border: 1px solid #ccc; padding: 8px;}この例では、各セルのあいだに左右8px・上下4pxのすき間ができます。
古い「cellspacing属性」との違い
HTMLには<table cellspacing="5">のように書く古い属性がありましたが、これはHTML5で非推奨となっており、現在は使いません。見た目の指定はCSS側（border-spacing）に統一するのが正しい書き方です。既存サイトでcellspacing属性が残っている場合は、CSSへ置き換えていくのがおすすめです。
よくある質問（FAQ）
Q. border-spacingを書いても間隔が変わりません。
A. border-collapse: separateになっているか確認してください。collapseだとborder-spacingは無効になります。
Q. 縦と横で間隔を変えられますか？
A. できます。border-spacing: 左右 上下;の2値指定を使ってください。
Q. cellspacing属性は使ってはいけませんか？
A. 非推奨です。新規で作る場合はCSSのborder-spacingを使いましょう。
