HTML テーブルのヘッダー

はじめに

HTML では、表は行と列でデータを表示するために使用されます。<thead> タグは、表のヘッダー行を定義するために使用されます。ヘッダー行は通常、その下の列の内容にラベルを付けるために使用され、記述的なラベルを保持します。

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

テーブルを作成する

index.html ファイルを作成し、テキストエディタで開きます。ここに HTML コードを記述します。

<table> タグを使用して表を作成します。

<table>
  <!-- content goes here -->
</table>

表のヘッダーを追加する

表のヘッダー行を定義するために <thead> タグを追加します。<thead> タグの中に、<th> タグを使用して表のヘッダー行を追加します。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

表にコンテンツを挿入する

<tbody> タグとネストされた <tr> および <td> タグを使用して、表にコンテンツを追加します。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>

表のヘッダーにスタイルを適用する

CSS を使用して <thead> タグを装飾します。以下は、ヘッダーの背景色を灰色に変更する例です。

<style>
  thead {
    background-color: gray;
  }
</style>

まとめ

<thead> タグは、表のヘッダー行を定義するために使用されます。これは <table> タグの別の子要素であり、<tbody> と <tfoot> タグの前に来ます。CSS を使用すると、表のヘッダーを装飾して視覚的に魅力的にすることができます。