CSS でテーブルにセルパディングを使用する

1. CSS のセルパディングとセル間隔の padding プロパティと border-spacing プロパティを使用する
2. CSS で border-spacing プロパティを使用して垂直方向と水平方向の間隔を指定する

この記事では、CSS で実現する方法とともに、セルのパディングとセル間隔の概念を紹介します。

CSS のセルパディングとセル間隔の padding プロパティと border-spacing プロパティを使用する

セルのパディングの目的は、セルの境界線からセル内のコンテンツまでのスペースを提供することです。CSS の padding プロパティを使用して、セルのパディングを指定できます。padding プロパティは、上、右、下、および左のパディングを表す省略形です。CSS セレクターを使用してテーブルのセルを選択し、それらのセルで padding プロパティを使用できます。

同様に、セル間隔の目的は、隣接するセル間にスペースを提供することです。border-spacing CSS プロパティを使用して、隣接するセルの境界線間の間隔を指定できます。ただし、このプロパティは、border-collapse プロパティが separate に設定されている場合にのみ機能します。これは、border-collapse を collapse に設定した場合、border-spacing プロパティを使用できないことを意味します。値 separate は、border-collapse プロパティのデフォルト値です。

セルのパディングとセル間隔のない通常の HTML テーブルは、次の適用された CSS と同等です。border-collapse:collapse は、隣接するセルの境界が 1つにマージされることを意味します。padding:0px は、セルにパディングがないことに似ています。これは、テーブルのデフォルトの動作に似ています。

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

たとえば、名前、住所、年齢という見出しを持つ HTML テーブルを作成します。表にいくつかの値を入力します。<td> </td> タグはテーブルデータを表します。CSS で、<table> タグを選択し、border-spacing を 5px に設定します。次に、<td> タグを選択し、padding を 5px に設定します。

したがって、テキストの 4つの側面すべてから 5px のセルパディングを作成しました。また、テーブルの各セルの境界線の間に 5px のスペースを作成しました。CSS でセルのパディングとセル間隔を実現する方法を学びました。

サンプルコード：

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

CSS で border-spacing プロパティを使用して垂直方向と水平方向の間隔を指定する

border-spacing プロパティを使用して、テーブル内のセルの境界間の水平方向と垂直方向の間隔を指定できます。前の例では、水平方向の間隔を適用しました。ここでは、両方の間隔を適用します。border-spacing プロパティには 2つの値を指定できます。1つ目は水平方向の間隔に似ており、2つ目は垂直方向の間隔に似ています。この方法は、上記で作成したテーブルに適用できます。

たとえば、table タグを選択し、border-spacing を 8px と 5px に設定します。水平方向の間隔は 8px、垂直方向の間隔は 5px になります。

サンプルコード：

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>