HTMLのテーブルのヘッダーを結合する方法

HTMLのテーブルのヘッダーを結合する方法

HTMLのテーブルでヘッダーを結合するには、colspan属性とrowspan属性を使用します。
これらの属性を使うことで、複数の列や行にまたがるヘッダーセルを作成できます。
以下に、HTMLとCSSの例を示しながら説明します。

HTMLファイル

まず、HTMLファイルではtableタグを使ってテーブルを作成し、thタグを使ってヘッダーセルを定義します。
colspan属性はセルを横方向に結合するため、rowspan属性はセルを縦方向に結合するために使用します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>テーブルヘッダー結合の例</title>
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header" colspan="2">ヘッダー1</th>
        <th class="test-header" rowspan="2">ヘッダー2</th>
      </tr>
      <tr>
        <th class="test-header">サブヘッダー1</th>
        <th class="test-header">サブヘッダー2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
      </tr>
      <tr>
        <td class="test-cell">データ4</td>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル

次に、CSSファイルでテーブルの見た目を整えます。
クラス名はtest-table、test-header、test-cellを使用しています。

/* styles.css */

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

.test-header {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.test-cell {
  border: 1px solid #ddd;
  padding: 8px;
}

説明

colspan属性:

この属性を使用すると、セルを横方向に結合できます。
上記の例では、最初の行の最初のth要素にcolspan="2"が設定されています。
これにより、このセルが2列分の幅を持つことになります。

rowspan属性:

この属性を使用すると、セルを縦方向に結合できます。
上記の例では、最初の行の3番目のth要素にrowspan="2"が設定されています。
このセルは2行分の高さを持ちます。

CSS:

CSSファイルでは、テーブル全体に幅を100%に設定し、border-collapseプロパティをcollapseに設定して、テーブルの境界線を統合しています。
ヘッダーセルには背景色と境界線、パディングを設定し、通常のセルには境界線とパディングのみを設定しています。

このように、colspanとrowspanを適切に使用することで、複雑なテーブルのヘッダーを作成できます。
テーブルのレイアウトを見やすくするためには、CSSでスタイリングを行うと良いでしょう。