HTML テーブルのパディングとスペーシング

HTMLテーブルの視認性を高めるためには、セル内やセル間の余白を適切に管理することが極めて重要です。モダンなWeb開発では、これらはすべてCSSを使用して制御します。

1. HTML セルパディング (Cell Padding)

パディングとは、セルの境界線（ボーダー）とその中身（コンテンツ）との間のスペースのことです。デフォルトでは、ほとんどのブラウザにおいてパディングは0に設定されています。

テーブルセルにパディングを追加するには、CSSの padding プロパティを使用します。

1.1 パディングの実装例

以下の例では、すべての <th>（ヘッダーセル）と <td>（データセル）に15ピクセルのパディングを設定しています。

th, td {
  padding: 15px;
}

また、特定の方向（上、下、左、右）だけにパディングを設定することも可能です。

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

2. HTML セルスぺーシング (Cell Spacing)

セルスぺーシングとは、各セル同士の間のスペース（間隔）のことです。

テーブルのセルスぺーシングを設定するには、CSSの border-spacing プロパティを <table> 要素に対して適用します。

2.1 セルスぺーシングの実装例

以下の例では、すべてのセル間の間隔を30ピクセルに設定しています。

table {
  border-spacing: 30px;
}

[!IMPORTANT]
注意点：border-spacing プロパティは、border-collapse プロパティが collapse（境界線の結合）に設定されている場合には機能しません。セル間の余白を有効にするには、border-collapse をデフォルトの separate にしておく必要があります。

3. まとめ

HTMLテーブルの余白を制御する主要なCSSプロパティのまとめです。

実務におけるデータダッシュボードや管理画面の構築では、情報の密度に応じてこれらの数値を微調整することが、優れたユーザー体験（UX）を提供する鍵となります。