HTML テーブル

HTMLテーブル（表）を使用すると、Web開発者はデータを行と列に整理して配置することができます。

1. HTML テーブルの基本構造

HTMLのテーブルは、セル（Cells）、行（Rows）、列（Columns）で構成されます。

1.1 基本的なテーブルの例

<table>
  <tr>
    <th>会社名</th>
    <th>担当者</th>
    <th>国</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>ドイツ</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>メキシコ</td>
  </tr>
</table>

2. テーブルセル (Table Cells)

各テーブルセルは、<td> と </td> タグで定義されます。<td> は Table Data の略です。

<td> と </td> の間にあるものが、セルのコンテンツとなります。

<td>セルの内容</td>

[!NOTE]
セルの中には、テキスト、画像、リスト、あるいは他のテーブルなど、あらゆるHTML要素を含めることができます。

3. テーブル行 (Table Rows)

各テーブル行は、<tr> と </tr> タグで定義されます。<tr> は Table Row の略です。

<table>
  <tr>
    <td>セル 1</td>
    <td>セル 2</td>
    <td>セル 3</td>
  </tr>
</table>

一つのテーブルの中に、必要な数だけ <tr> 要素を配置することができます。ただし、各行のセルの数は同じにするのが一般的です。

4. テーブルヘッダー (Table Headers)

見出しとして機能するセルを定義したい場合は、<td> の代わりに <th> タグを使用します。<th> は Table Header の略です。

デフォルトでは、ブラウザは <th> 要素内のテキストを太字かつ中央揃えで表示します。

<table>
  <tr>
    <th>見出し 1</th>
    <th>見出し 2</th>
    <th>見出し 3</th>
  </tr>
  <tr>
    <td>データ 1</td>
    <td>データ 2</td>
    <td>データ 3</td>
  </tr>
</table>

5. まとめ

HTMLテーブルの基本を支えるタグは以下の通りです。

モダンなWeb開発では、テーブルの枠線（境界線）やセルの余白、色の指定などはHTML属性ではなく、CSSを使用して制御するのがベストプラクティスです。データの「意味」をHTMLで正しく定義し、その「見た目」をCSSで整えるという関心の分離を意識しましょう。