CSSでテーブルに余白（パディングやマージン）を設定する方法

テーブルのセル内やセル同士、またはテーブル自体に余白を設定することで、見やすく美しいレイアウトを実現できます。

この記事では、CSSを使ってテーブルに余白を設定する基本的な方法を解説します。

方法
まとめ

方法

CSSでテーブルに余白（パディングやマージン）を設定する方法を詳しくみていきます。

1. セル内の余白（padding）を設定する

テーブルのセル内の余白（パディング）を設定するには、td や th に対して padding プロパティを使用します。

これにより、セル内のテキストやコンテンツに余白が付き、内容が中央に配置されます。

例: セル内にパディングを設定

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse; /* ボーダーを結合 */
    width: 100%; /* テーブルの幅を100%に設定 */
  }

  th, td {
    border: 1px solid #ccc; /* セルの境界線 */
    padding: 10px; /* セル内の余白 */
  }
</style>

説明:

padding: 10px; はセル内のテキストやコンテンツの周囲に10pxの余白を追加します。
border-collapse: collapse; を設定すると、セル同士のボーダーが1本にまとまります。

2. セル間の余白（border-spacing）を設定する

セル同士の間に余白を作りたい場合は、テーブル全体に対して border-spacing プロパティを使用します。

これにより、セル間のボーダーにスペースを追加することができます。

例: セル間に余白を設定

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

<style>
  table {
    border-collapse: separate; /* ボーダーを分離 */
    border-spacing: 10px; /* セル間の余白を10pxに設定 */
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

説明:

border-collapse: separate;
border-spacing が機能するように、セル間のボーダーを分離します。
border-spacing: 10px;
セル間に10pxの余白を追加します。

3. テーブル自体の余白（margin）を設定する

テーブル自体の周囲に余白を設定したい場合は、margin プロパティを使用します。

これにより、テーブルの外側に余白を追加し、他の要素との間にスペースを作ることができます。

例: テーブル全体に余白を設定

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse;
    margin: 20px auto; /* テーブルの周りに20pxの余白を設定し、中央寄せ */
    width: 80%; /* テーブルの幅を80%に設定 */
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

説明:

margin: 20px auto;
テーブルの上下に20pxの余白を追加し、左右を自動（auto）で中央寄せにします。

4. 個別のセルや列に余白を設定する

特定のセルや列だけに余白を設定したい場合、nth-child() や特定の class を使用して、個別に余白を設定することができます。

例: 2列目のセルにだけ余白を設定

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px;
  }

  /* 2列目のセルに追加の余白を設定 */
  td:nth-child(2) {
    padding: 20px;
  }
</style>

5. レスポンシブデザインを考慮した余白設定

画面サイズに応じて余白を変える場合、メディアクエリを使用します。

これにより、デバイスごとに最適な余白設定が可能になります。

例: スマートフォンサイズでの余白調整

@media (max-width: 600px) {
  table {
    width: 100%;
    margin: 10px; /* 小さい画面では余白を少なめに設定 */
  }

  th, td {
    padding: 5px; /* 小さい画面ではセルの余白も少なくする */
  }
}