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

HTMLのテーブルのセルを分割する方法
- HTMLファイル (index.html)
- CSSファイル (styles.css)
  - 説明

HTMLテーブルのセルを分割する方法について、具体的なコード例とともに説明します。
テーブルのセルを分割するには、HTMLとCSSの両方で対応する必要があります。
以下に、HTMLとCSSを分けて記載し、それぞれのファイルで必要なスタイリングとマークアップを示します。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルセルの分割例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header">ヘッダー1</th>
        <th class="test-header">ヘッダー2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell test-merged" colspan="2">このセルは2つの列を結合しています</td>
      </tr>
      <tr>
        <td class="test-cell">セル1</td>
        <td class="test-cell">セル2</td>
      </tr>
      <tr>
        <td class="test-cell test-merged" rowspan="2">このセルは2つの行を結合しています</td>
        <td class="test-cell">セル3</td>
      </tr>
      <tr>
        <td class="test-cell">セル4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル (styles.css)

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header, .test-cell {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

.test-header {
  background-color: #f4f4f4;
}

.test-cell {
  background-color: #ffffff;
}

.test-merged {
  background-color: #e0e0e0;
}

説明

1. HTMLファイル:
テーブルのセルを分割するためには、colspanとrowspan属性を使用します。
これにより、セルを横方向や縦方向に結合することができます。
例えば、tdと指定すると、このセルは2つの列にわたって結合されます。
逆に、tdと指定すると、このセルは2つの行にわたって結合されます。

2. CSSファイル:
テーブルのスタイリングを行います。
border-collapse: collapse;により、セルのボーダーが重ならないようにします。
.test-cellや.test-headerクラスでセルやヘッダーのスタイルを設定します。
.test-mergedクラスは結合されたセルに特別な背景色を設定するために使用します。

このようにして、HTMLとCSSを分けて管理することで、テーブルのセルを分割する際の視覚的な調整やレイアウトの変更が容易になります。