HTML テーブルの列グループ化をマスターする

はじめに

HTML の<colgroup>タグは、HTML テーブルの 1 つ以上の列にさまざまなスタイルを適用するために使用されます。<colgroup>タグを使用することで、テーブルの各セルにスタイルを定義する必要がなくなります。このタグの span 属性を使用すると、希望する列にスタイルを適用できます。

この実験では、HTML の<colgroup>タグを使用して色付きの列を持つテーブルを作成する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックすると、ポート 8080 でウェブサービスを実行できます。その後、Web 8080タブを更新してウェブページをプレビューできます。

HTML テーブルの作成

まず、<colgroup>タグを使用してスタイルを適用したい HTML テーブルを作成します。HTML ファイルに以下のコードを追加します。

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

上記のコードは、枠線の幅が 1 で、見出しが「Colored Table」のテーブルを作成します。<colgroup>タグには 3 つの<col>タグが含まれており、それぞれ 3 つの列に異なる色を適用しています。<thead>タグには 3 つの列の見出しを含む 3 つの<th>タグが含まれています。また、<tbody>タグには 3 つの列がある 2 行が含まれています。

より良いスタイリングのための CSS の記述

このステップでは、CSS を使用して上記で作成したテーブルにスタイルを適用します。

HTML ファイルに以下の CSS コードを追加します。

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

index.htmlファイルの完成したコードを確認します。各列に異なる色がある 3 列のテーブルが表示されるはずです。

まとめ

HTML の<colgroup>タグは、HTML のテーブルの 1 つ以上の列にさまざまなスタイルを適用するために使用され、テーブルの各セルにスタイルを定義する必要をなくします。この実験では、<colgroup>タグを使用して色付きの列を持つテーブルを作成し、CSS を使用してそれにスタイルを適用する方法を学びました。