HTMLのテーブルを3分割する方法

HTMLのテーブルを3分割する方法

HTMLでテーブルを3分割する方法を説明します。
これは、通常、大きなテーブルを視覚的に整理しやすくするために使用されます。
テーブルを分割するには、特定の行または列を区切り、それぞれに異なるスタイルを適用することが一般的です。
この方法を使うことで、テーブル内の異なるセクションを強調したり、グループ化したりすることができます。

ここでは、CSSファイルとHTMLファイルを分けて記述し、それぞれのセクションに特定のスタイルを適用する方法を紹介します。

1. HTMLファイルの構造

まず、テーブルの基本構造をHTMLで定義します。
今回は、3つのセクションに分割されたテーブルを作成します。
各セクションは行ごとに分けられます。
これを以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3分割テーブルの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="test-section-1">
        <td>セクション1 - 行1</td>
        <td>セクション1 - 行2</td>
        <td>セクション1 - 行3</td>
      </tr>
      <tr class="test-section-1">
        <td>セクション1 - 行4</td>
        <td>セクション1 - 行5</td>
        <td>セクション1 - 行6</td>
      </tr>
      <tr class="test-section-2">
        <td>セクション2 - 行1</td>
        <td>セクション2 - 行2</td>
        <td>セクション2 - 行3</td>
      </tr>
      <tr class="test-section-2">
        <td>セクション2 - 行4</td>
        <td>セクション2 - 行5</td>
        <td>セクション2 - 行6</td>
      </tr>
      <tr class="test-section-3">
        <td>セクション3 - 行1</td>
        <td>セクション3 - 行2</td>
        <td>セクション3 - 行3</td>
      </tr>
      <tr class="test-section-3">
        <td>セクション3 - 行4</td>
        <td>セクション3 - 行5</td>
        <td>セクション3 - 行6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

この例では、tableのクラス名をtest-tableとし、各セクションをtest-section-1、test-section-2、test-section-3のクラス名で区別しています。
これにより、後述するCSSで異なるスタイルを適用できます。

2. CSSファイルの構造

次に、上記のHTML構造にスタイルを適用するためのCSSを作成します。
このスタイルは別ファイル(styles.css)に保存します。

/* styles.css */
.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-table th,
.test-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

.test-section-1 {
  background-color: #f0f8ff;
}

.test-section-2 {
  background-color: #e6e6fa;
}

.test-section-3 {
  background-color: #ffe4e1;
}

このCSSでは、まずtable全体に対して幅を100%に設定し、ボーダーを統一しています。
各セクションには異なる背景色を設定しています。
具体的には、test-section-1には薄い青、test-section-2には薄い紫、test-section-3には薄いピンクを適用しました。
このようにすることで、各セクションが視覚的に区別しやすくなります。

3. その他のスタイルの調整

さらに細かい調整が必要な場合、追加のCSSスタイルを定義できます。
例えば、セクションごとにフォントの色やサイズを変更することも可能です。

.test-section-1 {
  background-color: #f0f8ff;
  font-weight: bold;
}

.test-section-2 {
  background-color: #e6e6fa;
  font-style: italic;
}

.test-section-3 {
  background-color: #ffe4e1;
  font-size: 14px;
}

このように設定することで、test-section-1には太字、test-section-2には斜体、test-section-3にはフォントサイズ14pxのスタイルが適用されます。

まとめ

HTMLでテーブルを3分割する方法は、各セクションに特定のクラスを割り当て、CSSを使ってスタイルを適用することで実現できます。
これにより、テーブルを視覚的に整理し、異なるセクションを強調することが可能です。
今回の例では、各セクションに異なる背景色を適用しましたが、他にもボーダーのスタイルやフォントの変更など、さまざまなカスタマイズが考えられます。