HTML基本講座6 テーブル

こんにちは！
今回は、HTMLで「表（テーブル）」を作るときに使うテーブルタグについて解説します。

Webページでよく見かける

• スケジュール表
• データ一覧
• 成績表や価格表

などは、HTMLのテーブルタグで作成できます。

---

HTML基本講座6 テーブル

テーブルタグとは？

HTMLで表（テーブル）を作るときに使うタグは以下の通りです。

タグ名	読み方	用途
<table>	テーブル	表全体を囲むタグ
<tr>	テーブルロー	行（row）を表すタグ
<th>	テーブルヘッダ	見出しセルを表すタグ（太字・中央揃え）
<td>	テーブルデータ	通常のデータセルを表すタグ

---

tableタグ：表全体の枠を作る

📌 使いどころ
テーブル全体を囲むタグです。

📖 説明
この中に <tr>（行）を入れ、その中に <th> や <td>（セル）を入れます。

💡 例

trタグ：行（row）を作る

📌 使いどころ
<tr> は「table row（行）」の略で、1行分のデータをまとめるのに使います。

📖 説明
1行ごとに <tr> タグで囲み、その中に <th> または <td> を並べて書きます。

💡 例

<tr>
  <td>バナナ</td>
  <td>150円</td>
</tr>

thタグ：見出しセルを作る

📌 使いどころ
<th> は表の「見出し（ヘッダー）」に使います。

📖 説明
見出しセルはデフォルトで太字かつ中央揃えになります。列や行のタイトルとして使います。

💡 例

<tr>
  <th>名前</th>
  <th>年齢</th>
</tr>

tdタグ：データセルを作る

📌 使いどころ
<td> は「table data（データセル）」の略で、通常のデータを表示するセルに使います。

📖 説明
<tr>（行）の中に記述し、1列ごとに <td> を使います。

💡 例

<tr>
  <td>田中</td>
  <td>28</td>
</tr>

まとめ

タグ名	役割	使う場面
<table>	表全体を囲む	スケジュール表、価格表、データ一覧など
<tr>	行（row）を定義する	各行ごとの情報をまとめるとき
<th>	見出しセルを定義する	表の見出し、タイトルに使う
<td>	データセルを定義する	実際の値や内容を表示するとき

テーブルタグを使いこなせば、情報を整理して見やすく表示できるようになります！