Webページでデータをわかりやすく整理するなら、テーブル（表）が大活躍します！
この記事では、超初心者向けにHTMLの<table>タグの使い方をわかりやすく解説します。
そもそもテーブルとは？
テーブルとは、行（横）と列（縦）でデータを整理する「表」のことです。
完成イメージ:
| 名前 | 年齢 | 趣味 |
|---|---|---|
| さくら | 25 | 読書 |
| たろう | 30 | サッカー |
| はな | 22 | 音楽鑑賞 |
このような表を、HTMLでどのように作るのかを解説していきます！
テーブルのHTMLタグ
| タグ | 役割 |
|---|---|
<table> |
表全体を囲むタグ |
<tr> |
1つの「行」を表すタグ |
<th> |
見出し用のセル（太字で中央揃え） |
<td> |
データ用のセル（普通のテキスト） |
これが、HTMLで表を作成するための基本的な構成です。
📋 **サンプルコード（シンプルなテーブル）**
<table border="1">
<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>
💡 ポイント: <th> は見出しセル、<td> はデータセルです。
セルの結合には2つの属性を使います:
colspan：横方向のセルを結合するrowspan：縦方向のセルを結合する
完成イメージ（横方向のセル結合）:
| 日付 | 午前の活動 | 午後の活動 |
|---|---|---|
| 月曜日 | 会議 | 研修 |
| 火曜日 | 特別セミナー | |
📋 例1：横方向のセルを結合（colspan）
<table border="1">
<tr>
<th>日付</th>
<th>午前の活動</th>
<th>午後の活動</th>
</tr>
<tr>
<td>月曜日</td>
<td>会議</td>
<td>研修</td>
</tr>
<tr>
<td>火曜日</td>
<td colspan="2">特別セミナー</td>
</tr>
</table>
💡 ポイント: colspan="2"は、2つの列をまとめることを意味します。
完成イメージ（縦方向のセル結合）:
| 時間帯 | 教科 | 担当教師 |
|---|---|---|
| 1・2限 | 理科 | 田中 |
| 佐藤 | ||
| 3限 | 英語 | 鈴木 |
例2：縦方向のセルを結合（rowspan）
<table border="1">
<tr>
<th>時間帯</th>
<th>教科</th>
<th>担当教師</th>
</tr>
<tr>
<td rowspan="2">1・2限</td>
<td rowspan="2">理科</td>
<td>田中</td>
</tr>
<tr>
<td>佐藤</td>
</tr>
<tr>
<td>3限</td>
<td>英語</td>
<td>鈴木</td>
</tr>
</table>
💡 ポイント: rowspan="2"は、2つの行を1つのセルとして結合します。
おさらいクイズ！
1️⃣ テーブルを作るための正しいタグはどれ？
A.
<list>
<li>名前</li>
<li>年齢</li>
</list>
B.
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>さくら</td>
<td>25</td>
</tr>
</table>
✅ 答え: → Bが正解！ <table>タグを使うことで表を作成できます。
2️⃣ 表の見出しセルに使うタグはどれ？
- A.
<td> - B.
<th>
✅ 答え: → Bが正解！ <th>は見出しセル、<td>はデータセルです。
まとめ
- <table>： 表全体を作るタグ
- <tr>： 行を作るタグ
- <th>： 見出し用のセル（太字）
- <td>： データ用のセル
コメントを残す