第7回 テーブルの作成方法 – table, tr, td, th を使ったテーブルの作成 – HTML入門講座

はじめに

データや情報を整理して表示するために、テーブル（表）は非常に便利なツールです。HTMLでは、<table> タグを使ってテーブルを作成します。テーブルは行と列で構成され、データを分かりやすくレイアウトすることができます。この講座では、HTMLで基本的なテーブルを作成する方法を学び、表の要素や属性を理解していきましょう。

基本的なテーブルの構造

HTMLのテーブルは、<table> タグを使って定義されます。各行は <tr>（table row）タグで囲まれ、各セルには <td>（table data）タグが使用されます。また、見出し（ヘッダー）には <th> タグが使われ、通常は太字で中央揃えになります。

基本的なテーブルの例

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>30</td>
    <td>デザイナー</td>
  </tr>
</table>

このコードは、以下のようなテーブルを表示します：

テーブルの基本要素

テーブルを構成するいくつかの基本的な要素を紹介します。

<table>（テーブル要素）

<table> タグは、テーブル全体を定義します。テーブルのデザインやスタイルを適用するために使用される属性やCSSを指定することも可能です。

<tr>（行要素）

<tr> タグは、テーブルの各行を表します。各行には、データセル（<td>）やヘッダーセル（<th>）が含まれます。

<td>（データセル）

<td> タグは、テーブルのデータセルを定義します。通常はテキストや数値が入りますが、セル内に画像やリンクを挿入することもできます。

<th>（ヘッダーセル）

<th> タグは、テーブルの見出しを定義します。デフォルトで太字になり、中央揃えになります。ヘッダーは列のタイトルとして使われることが多いです。

テーブルの属性

テーブルには、いくつかの属性を使ってスタイルやレイアウトをカスタマイズできます。ここでは代表的な属性をいくつか紹介します。

border属性

テーブルに枠線を追加するには、border 属性を使用します。例えば、次のように指定することで、テーブルに枠線を付けることができます：

<table border="1">
  ...
</table>

この属性は、CSSを使用してより詳細なスタイル設定を行うことができますが、簡単に枠線を追加したい場合には便利です。

colspan属性とrowspan属性

テーブルセルを複数の列や行にまたがって結合する場合、colspan と rowspan 属性を使います。

colspan属性の例（列を結合）

<table border="1">
  <tr>
    <th colspan="2">名前と年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
    <td>エンジニア</td>
  </tr>
</table>

この例では、最初の列（「名前と年齢」）が2つの列にまたがって表示されます。

rowspan属性の例（行を結合）

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td rowspan="2">佐藤</td>
    <td>30</td>
    <td>デザイナー</td>
  </tr>
  <tr>
    <td>35</td>
    <td>マネージャー</td>
  </tr>
</table>

この例では、佐藤の名前が2行にまたがって表示されます。

テーブルのスタイリング

CSSを使うことで、テーブルの外観をさらにカスタマイズできます。以下のようなスタイルを使って、テーブルを美しく整えることが可能です。

CSSでのテーブルのスタイリング例

<style>
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}
</style>

このCSSは、テーブル全体を幅100%にし、セルに適切な余白と枠線を追加します。また、<th> タグで定義された見出しセルには背景色を設定して、見やすくしています。

まとめ

今回は、HTMLでテーブルを作成する基本的な方法と、テーブルの各要素や属性について学びました。テーブルは、データを整理して表示するための強力なツールであり、複雑な情報を分かりやすく表示するのに役立ちます。また、CSSを使ってスタイリングすることで、さらに視覚的に魅力的なテーブルを作成することができます。次回は、フォームの作成と基本的な使い方について学びましょう！