テーブルのセル間余白を自由自在に！CSSのborder-spacingで読みやすい表を作る基本テクニック

テーブルのセル間余白を調整する方法（border-spacing）

先生と生徒の会話形式で理解しよう

生徒

「Webサイトに表を作ったのですが、マス目とマス目の間が詰まりすぎていて読みづらいです。この隙間を広げるにはどうすればよいですか？」

先生

「それはCSSのborder-spacingというプロパティを使えば、簡単に解決できますよ。表の見た目を整える上で非常に便利な機能です。」

生徒

「border-spacingという言葉、初めて聞きました。初心者の私でも使えるものなのでしょうか？」

先生

「大丈夫です。border（境界線）とspacing（間隔）という言葉の通り、境界線の間隔を調整する命令です。仕組みから一緒に見ていきましょう！」

1. テーブルのセル間余白とは？なぜ隙間が必要なのか

Webサイトで情報を表形式で表示するとき、マス目同士がぴったりとくっついていると、どこに何が書かれているのか視覚的に迷いやすくなります。文字やデータが詰まりすぎていると圧迫感があり、ユーザーは読むことに疲れてしまうかもしれません。そこで「余白」を適度に取り入れることで、表は一気に読みやすくなります。

この余白をCSSでコントロールするのがborder-spacingです。余白を広げることで、情報のグループが明確になり、ユーザーはスムーズに内容を理解できるようになります。Webデザインにおいて、この「余白の取り方」は情報の分かりやすさを左右する非常に重要な要素です。初心者こそ、この基礎をしっかり押さえておきましょう。

2. border-spacingの基本と使い方

border-spacingは、テーブルタグ（table）に対して適用するプロパティです。数値（pxなど）を指定することで、セルとセルの間の隙間を広げることができます。ただし、この設定を有効にするためには、少し注意点があります。実は、前に学んだborder-collapse設定が「collapse（重なる）」状態になっていると、この隙間は機能しません。


<style>
  .my-table {
    border-collapse: separate;
    border-spacing: 15px;
  }
  .my-table td {
    background-color: #f0f0f0;
    padding: 10px;
  }
</style>

<table class="my-table">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

ブラウザ表示

上のコードにあるように、「border-collapse: separate;」として分離させてからでないと、余白は現れません。このセット使いが、テーブルデザインの基本となります。

3. 縦と横で異なる余白を設定するテクニック

border-spacingには、縦と横で異なる幅を指定することも可能です。たとえば「縦の隙間は広めにとって、横の隙間は狭くする」といった調整ができるため、情報の密度に合わせてデザインを柔軟に変更できます。これを利用すれば、縦長の表でも横長の表でも、常に美しいバランスを保つことが可能です。


<style>
  .custom-table {
    border-collapse: separate;
    border-spacing: 5px 20px;
  }
  .custom-table td {
    background-color: #e9ecef;
    padding: 10px;
  }
</style>

<table class="custom-table">
  <tr>
    <td>データA</td>
    <td>データB</td>
  </tr>
  <tr>
    <td>データC</td>
    <td>データD</td>
  </tr>
</table>

ブラウザ表示

このように、一つの命令で二つの数字を指定することで、デザインの幅が一気に広がります。プログラムを書くのが初めての方でも、このように数字を変えるだけで挙動が変わることを実際に試せば、Web制作の面白さをすぐに実感できるはずです。

4. セル内余白のpaddingとの違いを理解する

ここで初心者が混同しやすいのが「padding」との違いです。border-spacingは「セルとセルの外側の隙間」を広げるのに対し、paddingは「セルの内側、文字と枠線の間の隙間」を広げます。この二つを使い分けることで、表の見た目を細かくコントロールできるようになります。


<style>
  .diff-table {
    border-collapse: separate;
    border-spacing: 10px;
  }
  .diff-table td {
    padding: 15px;
    border: 1px solid #333;
  }
</style>

<table class="diff-table">
  <tr>
    <td>内側に余白</td>
    <td>外側に余白</td>
  </tr>
</table>

ブラウザ表示

外側の隙間と内側の余白、両方をバランスよく設定することが、プロのような美しい表を作る秘訣です。まずは少しずつ数値を変えてみて、自分にとって一番読みやすいバランスを探してみてください。

5. スマホ対応テーブルでの余白の活用

スマートフォンなどの小さい画面では、余白を広げすぎると表示できるデータが少なくなってしまいます。レスポンシブデザインという、画面の大きさに合わせてデザインを変える手法を取り入れるなら、画面幅が小さいときはborder-spacingを小さくし、広いときは広くするなどの調整が有効です。

Web制作において、どんなデバイスでも快適に見られるように工夫することは、現代のエンジニアにとって必須の技術といえます。余白という「動的なスペース」を使いこなして、スマホでもパソコンでも見栄えの良い表を目指しましょう。

6. 見やすい表を作るための色の組み合わせ

余白で隙間を作った後は、背景色で情報のグループを整理しましょう。例えば、各セルに背景色を付けると、余白の部分がよりはっきりと浮かび上がり、情報の区切りが明確になります。ただし、背景色と文字色のコントラスト（明るさの差）がしっかりしていないと、かえって読みづらくなるので注意が必要です。


<style>
  .colored-table {
    border-collapse: separate;
    border-spacing: 8px;
  }
  .colored-table td {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px;
  }
</style>

<table class="colored-table">
  <tr>
    <td>青いセル</td>
    <td>白い文字</td>
  </tr>
</table>

ブラウザ表示

このように色と余白を組み合わせるだけで、デザインは驚くほど洗練されます。まずはシンプルな色から試して、自分だけのスタイルを確立していってください。