CellpaddingとCellspacingの違いとは？HTMLテーブルの余白設定をわかりやすく解説

HTMLで表（テーブル）を作成する際、セル内やセル同士の余白を調整したい場面は多くあります。そのときに登場するのが「cellpadding」と「cellspacing」という2つの属性です。名前は似ていますが、役割はまったく異なります。本記事では、それぞれの特徴と具体的な使い方、そして両者の違いについて詳しく解説します。

Cellpadding（セルパディング）とは

• 単一のセルに対して作用する属性です。

• セルの枠線（ボーダー）とセル内のコンテンツ（文字や画像など）との間の余白を調整します。

• デフォルト値は1（ピクセル）です。

• コンテンツが枠に密着して見づらくなるのを防げるため、視認性向上に効果的な手法とされています。

• HTMLの<table>タグに対して指定して使用します。

記述例

<table cellpadding="値">.....</table>

数値を大きくするほど、セルの枠と中身の間隔が広がります。例えばcellpadding="10"とすれば、上下左右に10pxの余白が確保されます。

Cellspacing（セルスペーシング）とは

• 複数のセル間（セルとセルの境界）に対して作用する属性です。

• 隣り合うセル同士の間隔を設定します。

• デザインの調整力としては、cellpaddingほど柔軟ではありません。

• デフォルト値は2（ピクセル）です。

• こちらもHTMLの<table>タグに対して指定して使用します。

記述例

<table cellspacing="値">.....</table>

数値を大きくすると、セルとセルの間に隙間が生まれ、マス目が分離して表示されます。cellspacing="0"にすると、セル同士がぴったりと接した表になります。

両者の違いを比較

注意点：HTML5では非推奨

cellpaddingおよびcellspacingはHTML4.01までで使われていた属性であり、HTML5では廃止（非推奨）されています。現在のWeb制作では、CSSを使って余白を制御するのが標準的な方法です。

• cellpaddingの代わり → td, th { padding: 10px; }

• cellspacingの代わり → table { border-collapse: collapse; } や border-spacing: 5px;

ただし、古いシステムやメールマガジン用のHTMLなどでは今でもこれらの属性が使われることがあるため、意味と挙動は正しく理解しておきましょう。

まとめ

cellpaddingは「セルの中身と枠線の間の余白」を、cellspacingは「セル同士の間隔」を制御する属性です。両者は似た名前ながら役割がまったく異なるため、混同しないようにしましょう。現行のWeb標準ではCSSによる制御が推奨されますが、レガシーなコードを読む際には必須の知識です。