HTMLテーブルのセル内余白とセル間余白を設定するサンプルコード

2024-04-05

HTMLのテーブルで cellpadding と cellspacing を CSS で設定する方法

table 要素に直接設定する

table {
  padding: 10px; /* セル内余白 */
  border-spacing: 5px; /* セル間余白 */
}

個々のセルに設定する

td, th {
  padding: 10px; /* セル内余白 */
}

td + td, th + th {
  border-left-width: 5px; /* セル間余白 */
}

tr:first-child td, tr:first-child th {
  border-top-width: 5px; /* セル間余白 */
}

疑似クラスを使う

td:first-child, th:first-child {
  padding-left: 10px; /* セル内余白 */
}

td:last-child, th:last-child {
  padding-right: 10px; /* セル内余白 */
}

tr:first-child td, tr:first-child th {
  padding-top: 10px; /* セル内余白 */
}

tr:last-child td, tr:last-child th {
  padding-bottom: 10px; /* セル内余白 */
}

属性セレクタを使う

[cellpadding] {
  padding: 10px; /* セル内余白 */
}

[cellspacing] {
  border-spacing: 5px; /* セル間余白 */
}

ポイント

padding プロパティは、すべての辺に同じ余白を設定します。個々の辺に異なる余白を設定したい場合は、padding-top、padding-right、padding-bottom、padding-left プロパティを個別に設定します。
border-spacing プロパティは、すべての辺の余白を同時に設定します。
疑似クラスや属性セレクタを使うと、より細かい制御が可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLテーブルのセル内余白とセル間余白を設定するサンプル</title>
  <style>
    /* 方法1 */
    table {
      padding: 10px;
      border-spacing: 5px;
    }

    /* 方法2 */
    td, th {
      padding: 10px;
    }

    td + td, th + th {
      border-left-width: 5px;
    }

    tr:first-child td, tr:first-child th {
      border-top-width: 5px;
    }

    /* 方法3 */
    td:first-child, th:first-child {
      padding-left: 10px;
    }

    td:last-child, th:last-child {
      padding-right: 10px;
    }

    tr:first-child td, tr:first-child th {
      padding-top: 10px;
    }

    tr:last-child td, tr:last-child th {
      padding-bottom: 10px;
    }

    /* 方法4 */
    [cellpadding] {
      padding: 10px;
    }

    [cellspacing] {
      border-spacing: 5px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>東京都渋谷区</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>大阪府大阪市</td>
    </tr>
  </table>
</body>
</html>

このコードを実行すると、以下のようになります。

HTMLのテーブルでセル内余白とセル間余白を設定するには、padding と border-spacing プロパティを使用します。これらのプロパティは、table 要素、個々のセル、疑似クラス、属性セレクタを使って設定することができます。

どの方法を使うかは、状況によって異なります。例えば、すべてのセルの余白を同じように設定したい場合は、table 要素に直接設定するのが簡単です。一方、個々のセルの余白を個別に設定したい場合は、疑似クラスや属性セレクタを使うのが便利です。

HTMLテーブルのセル内余白とセル間余白を設定するその他の方法

colspan 属性と rowspan 属性は、セルを複数の列または行にわたって結合するために使用されます。これらの属性を使って、セル内余白とセル間余白を調整することができます。

例えば、以下のコードは、2つの列を結合して、そのセルに10pxの余白を設定しています。

<table>
  <tr>
    <th colspan="2">名前</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
</table>

<table>
  <tr>
    <th width="100px">名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
</table>

<table>
  <tr>
    <th style="border: 5px solid black;">名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
</table>

JavaScriptを使って、セル内余白とセル間余白を動的に設定することができます。

例えば、以下のコードは、ボタンをクリックすると、セルの余白を10pxずつ増減するスクリプトです。

<script>
function increasePadding() {
  var cells = document.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.padding = "10px";
  }
}

function decreasePadding() {
  var cells = document.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.padding = "0px";
  }
}
</script>

<button onclick="increasePadding()">余白を増やす</button>
<button onclick="decreasePadding()">余白を減らす</button>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
</table>