レッスン8: HTMLで表を作成しよう！tableタグの基本をマスター
データを行と列で整理して表示するための表組みを学びましょう。
🎯 学習目標
- HTMLの表を構成する基本タグを理解する
- 行・列の概念を掴み、見やすい表を作成できる
- セル結合や見出しセルなど、応用も含めて学ぶ
📚 レッスン
1. HTMLの表組み（table）について
<table>とは？
- データを行（row）と列（column）の形式で表にするためのタグ
- 表は主に比較・一覧表示・スケジュール・成績表などに使われる
基本的なテーブルの例
| 項目 | 価格 |
|---|---|
| りんご | 100円 |
2. 基本構造
HTMLの表は以下のようなタグで構成されます。
<table>
<tr>
<th>項目</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
</table>| タグ | 役割 |
|---|---|
<table> |
表全体の枠組み |
<tr> |
行（row）を表す |
<th> |
見出しセル（太字・中央寄せ） |
<td> |
通常のデータセル |
3. セルの結合（colspan, rowspan）
セルを横（列）や縦（行）にまたがって結合することができます。
<table border="1">
<tr>
<th>名前</th>
<th colspan="2">連絡先</th>
</tr>
<tr>
<td>山田</td>
<td>メール</td>
<td>電話</td>
</tr>
</table>横に結合
<td colspan="2">合計</td>
colspan="2"属性は、セルを横方向（水平方向）に結合するために使用します。
この例では、2つのセルを横に結合して1つの大きなセルにしています。
数字の「2」は結合するセルの数を表しており、「3」や「4」など他の数値も指定できます。
結合されたセルは、指定した数の分だけ横幅を取るようになります。
縦に結合
<td rowspan="3">時間</td>
rowspan="3"属性は、セルを縦方向（垂直方向）に結合するために使用します。
この例では、3つのセルを縦に結合して1つの大きなセルにしています。
数字の「3」は結合する行数を表しており、「2」や「4」など他の数値も指定できます。
結合されたセルは、指定した数の分だけ縦に広がるようになります。
4. よくある用途
| 用途例 | 説明 |
|---|---|
| スケジュール表 | 行に時間、列に曜日 |
| 商品一覧表 | 商品名・価格・在庫など |
| 成績表 | 名前・教科ごとの点数 |
5. 注意点
- レイアウト目的で表を使うのはNG（CSSで行うべき）
- 表が複雑になる場合は、読みやすい構造・ラベルを意識
今日のまとめ
<table>は表形式のデータに使うと便利<th>は列や行の見出しに使うとアクセシビリティが向上するcolspan・rowspanでセルの結合も可能
📚 リファレンス
このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
1. 基本的な表を作ってみよう
次の表を作成してください。
| 商品名 | 単価 | 在庫数 |
|---|---|---|
| りんご | 100円 | 50個 |
| バナナ | 120円 | 30個 |
| みかん | 90円 | 80個 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品一覧表</title>
</head>
<body>
<table border="1">
<!-- ここに表コードを記述 -->
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品一覧表</title>
</head>
<body>
<table border="1">
<tr>
<th>商品名</th>
<th>単価</th>
<th>在庫数</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<td>バナナ</td>
<td>120円</td>
<td>30個</td>
</tr>
<tr>
<td>みかん</td>
<td>90円</td>
<td>80個</td>
</tr>
</table>
</body>
</html>2. セルの結合を使ってみよう
次の表をHTMLで作成してください（「5/1」は縦に3つの行を結合）
| 日付 | 食事 | メニュー |
|---|---|---|
| 5/1 | 朝食 | トースト |
| 昼食 | カレー | |
| 夕食 | 焼き魚定食 | |
| 5/2 | 朝食 | パンケーキ |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>食事表</title>
</head>
<body>
<table border="1">
<!-- ここに表コードを記述 -->
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>食事表</title>
</head>
<body>
<table border="1">
<tr>
<th>日付</th>
<th>食事</th>
<th>メニュー</th>
</tr>
<tr>
<td rowspan="3">5/1</td>
<td>朝食</td>
<td>トースト</td>
</tr>
<tr>
<td>昼食</td>
<td>カレー</td>
</tr>
<tr>
<td>夕食</td>
<td>焼き魚定食</td>
</tr>
<tr>
<td>5/2</td>
<td>朝食</td>
<td>パンケーキ</td>
</tr>
</table>
</body>
</html>✅ 理解度チェック
📘 次回予告
ページの情報を正しく伝える！HTMLメタタグとSEOの基礎を学びます。