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

はじめに

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

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/fig_cap -.-> lab-70728{{"HTML テーブルの列グループ化"}} html/tables -.-> lab-70728{{"HTML テーブルの列グループ化"}} html/complex_tbl -.-> lab-70728{{"HTML テーブルの列グループ化"}} html/tbl_access -.-> lab-70728{{"HTML テーブルの列グループ化"}} end

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を使用してそれにスタイルを適用する方法を学びました。