テーブルデザインをワンランクアップ！TBODY要素間にスペースを入れて見やすくする

2024-07-27

HTMLとCSSでTBODY要素間にスペースを入れる方法

HTMLのTBODY要素は、テーブル内の行グループを表します。デフォルトでは、TBODY要素間にスペースはありませんが、CSSを使用して、上下に余白を追加することができます。

方法

TBODY要素間にスペースを入れる方法はいくつかあります。

marginプロパティを使用する

marginプロパティを使用して、TBODY要素の上下に余白を設定することができます。

tbody {
  margin-top: 10px;
  margin-bottom: 10px;
}

tbody {
  padding-top: 10px;
  padding-bottom: 10px;
}

border-spacingプロパティを使用する

border-spacingプロパティを使用して、テーブル内のすべてのセルの間の余白を設定することができます。

table {
  border-spacing: 10px;
}

擬似要素を使用する

::beforeおよび::after擬似要素を使用して、TBODY要素の上下に余白を追加することができます。

tbody::before {
  content: "";
  display: block;
  height: 10px;
}

tbody::after {
  content: "";
  display: block;
  height: 10px;
}

どの方法を使用するべきか

どの方法を使用するかは、目的によって異なります。

上下に均等に余白を追加したい場合は、marginプロパティを使用するのがおすすめです。
セル間の余白も含めて全体的に余白を追加したい場合は、border-spacingプロパティを使用するのがおすすめです。
擬似要素を使用する場合は、より細かい調整が可能になります。

上記のコードは例です。必要に応じて、値を変更してください。
複数の方法を組み合わせて使用することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 5px;
    }

    tbody {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>項目</th>
        <th>値</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>名前</td>
        <td>山田太郎</td>
      </tr>
      <tr>
        <td>年齢</td>
        <td>30歳</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>住所</td>
        <td>〒100-0001 東京都千代田区千代田1-1-1</td>
      </tr>
      <tr>
        <td>電話番号</td>
        <td>03-1234-5678</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

説明

tbody {
  margin-top: 10px;
  margin-bottom: 10px;
}

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

他の方法

margin-topとmargin-bottomプロパティを個別に設定する

tbody {
  margin-top: 10px;
  margin-bottom: 10px;
}

border-collapseプロパティを使用する

table {
  border-collapse: collapse;
}

tbody {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

nth-childセレクタを使用する

nth-childセレクタを使用すると、特定の順番の子要素を選択することができます。このセレクタを使用して、偶数番目のTBODY要素にのみ余白を設定することができます。

tbody:nth-child(even) {
  margin-top: 10px;
}

JavaScriptを使用する

JavaScriptを使用して、TBODY要素間にスペースを入れることもできます。

const table = document.querySelector("table");
const tbodyList = table.querySelectorAll("tbody");

for (let i = 0; i < tbodyList.length; i++) {
  if (i % 2 === 1) {
    tbodyList[i].style.marginTop = "10px";
  }
}