HTML テーブルのヘッダー セル

はじめに

HTML では、<th> タグを使用して、セルのグループのヘッダーとして 1 つのセルを定義します。HTML テーブル セルには 2 種類あります。ヘッダー セルと標準セルです。ヘッダー セルはセルのグループのヘッダーとして使用され、標準セルにはテーブルのデータが含まれます。

この手順に従う実験では、簡単な説明とコード スニペットを使って、<th> タグを使って HTML テーブルにヘッダー セルを作成する方法を案内します。

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

基本的な HTML テーブルの作成

まず、HTML を使ってテーブルを作成する必要があります。

テーブルを作成するには、<table> タグを使用し、各行を <tr> タグで表し、各セルを <td> タグで表します。

たとえば、次のコードでは 2 行 2 列の単純な HTML テーブルが作成されます。

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

ヘッダー セルの作成

ヘッダー セルを作成するには、ヘッダー セルを追加したいテーブル行で <td> タグを <th> タグに置き換える必要があります。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

タグに属性を追加する

<th> タグは、ヘッダー セルのフォーマットと構造を整えるために、さまざまな属性をサポートしています。

• Abbr: セルの内容の短縮形を定義するために使用します。
• Colspan: セルが跨ぐ列の数を指定します。
• Rowspan: セルが跨ぐ行の数を指定します。
• Scope: ヘッダー タグが関連するセルを指定します。
• Header: セルに関連する 1 つ以上のヘッダー セルを指定するために使用します。

たとえば、次のコードでは、「abbr」と「colspan」属性を持つヘッダー セルが作成されます。

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

まとめ

この手順に従う実験では、<th> タグを使って HTML テーブルにヘッダー セルを作成する方法を学びました。HTML テーブルのヘッダーは、データを構造化された形で整理するために重要です。th タグを使用することで、ヘッダー セルを作成し、そのフォーマットと属性を管理することができます。