HTML 入門

HTML テーブルの作成

テーブル（表）を使用することで、ウェブページ上でデータを組織的かつ構造的な形式で表示できるようになります。

本セクションでは、テーブルを作成するために不可欠なコア HTML タグである <table>、<tr>、<th>、および <td> について深く学習していきます。

1. <table> タグ：テーブルのコンテナ

<table> タグは、あらゆる HTML テーブルの基盤となります。

  • 役割: 他のすべてのテーブル要素を保持するコンテナ（Container）として機能し、テーブル全体の構造を定義します。
  • 比喩: すべてを固定するための「フレーム（枠組み）」だと考えてください。<table> タグがなければ、ブラウザはそこにある要素がテーブルを構成しようとしていることを認識できません。

基本的な例:

<table>
</table>

このシンプルなコードは空のテーブルを作成します。まだ行やデータが含まれていないため、この段階ではページ上に何も表示されません。

2. <tr> タグ：テーブルの行を定義する

<tr> は "Table Row"（テーブルの行）を意味します。

  • 役割: テーブル内の水平方向の 1 行を定義します。各 <tr> タグは新しいデータの行を表します。
  • 使い方: テーブルデータ（つまり <td> または <th> タグ）を <tr> タグの内部に配置する必要があります。

例:

<table>
  <tr>
    </tr>
  <tr>
    </tr>
</table>

このコードは 2 行のテーブルを作成します。これもまだ行の中にデータがないため、視覚的な内容は表示されません。

3. <th> タグ：テーブルヘッダーを定義する

<th> は "Table Header"（テーブルヘッダー）を意味します。

  • 役割: テーブルの見出しセルを定義するために使用されます。通常、これらのセルには列の名前が含まれ、各列のデータに対するコンテキスト（文脈）を提供します。
  • 外観: デフォルトでは、<th> タグ内のテキストは太字で中央揃えに表示されます（もちろん、これは CSS で変更可能です）。
  • 位置: <th> タグは <tr> タグの中に配置され、通常はテーブルの最初の行として使用されます。

例:

<table>
  <tr>
    <th>氏名</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
</table>

このコードは、「氏名」、「年齢」、「職業」という 3 つのヘッダーセルを持つ行を作成します。

ベストプラクティス: テーブルの見出しには常に <th> タグを使用してください。これにより視覚的な区別がつくだけでなく、アクセシビリティ（Accessibility）が大幅に向上し、スクリーンリーダーを利用する視覚障害を持つユーザーがテーブル構造を正しく理解するのに役立ちます。

4. <td> タグ：テーブルデータを定義する

<td> は "Table Data"（テーブルデータ）を意味します。

  • 役割: テーブル内の標準的なデータセルを定義するために使用されます。これらのセルには、テキスト、数値、さらには画像などの実際のコンテンツが含まれます。
  • 位置: <th> と同様に、<td> タグも必ず <tr> タグの中に配置する必要があります。

例:

<table>
  <tr>
    <th>氏名</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
    <td>ソフトウェアエンジニア</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25</td>
    <td>マーケティングマネージャー</td>
  </tr>
</table>

このコードは、ヘッダー行と 2 つのデータ行を持つテーブルを作成します。1 行目のデータは「田中太郎」について、2 行目は「佐藤花子」についての情報です。

       重要なヒント: 各行における <td> タグの数は、通常ヘッダー行の <th> タグの数と一致させる必要があります。これにより、データが対応する列の見出しの下に正しく整列されることが保証されます。

5. 総合的なコード例：完全なテーブル

これら 4 つのタグを組み合わせて、シンプルな商品リストを作成する完全な例を見てみましょう。

<table>
  <tr>
    <th>製品名</th>
    <th>価格</th>
    <th>在庫数</th>
  </tr>
  
  <tr>
    <td>ノートパソコン</td>
    <td>120,000円</td>
    <td>5</td>
  </tr>
  
  <tr>
    <td>マウス</td>
    <td>2,500円</td>
    <td>50</td>
  </tr>
  
  <tr>
    <td>キーボード</td>
    <td>7,500円</td>
    <td>25</td>
  </tr>
</table>

このコードを実行すると、3 列（製品名、価格、在庫数）と 3 行のデータを持つテーブルがレンダリングされます。