HTMLのtableタグの使い方を完全ガイド！初心者でもわかる表の作り方
新人と先輩の会話形式で理解しよう
新人
「HTMLで表を作る方法ってありますか？一覧みたいに並べたいんですけど…」
先輩
「それならtableタグを使えば、表形式で情報を整理できますよ。」
新人
「tableタグって、どうやって使えばいいんですか？」
先輩
「基本から一緒に見ていきましょう。tableの中にはthやtr、tdというタグを組み合わせて使うんですよ。」
1. HTMLで表を作る基本の構造
HTMLでは、表を作るときにtableタグを使います。tableの中にはtr（テーブルの行）を作り、th（見出し）やtd（データ）を配置します。
さらに、表に枠線を付けるためには、tableタグにborder="1"と指定することで、簡単に線をつけることができます。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
<tr>
<td>田中 太郎</td>
<td>28</td>
<td>エンジニア</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>35</td>
<td>デザイナー</td>
</tr>
</table>
2. 各タグの役割をしっかり理解しよう
tableタグは表全体を囲む役割、trタグは行を作る、thは見出し用、tdは普通のデータ用として使います。
これらの役割を知っておけば、表の構造がわかりやすくなります。
- table：表全体の囲い
- tr：行を定義
- th：見出しセル（太字・中央寄せ）
- td：通常のデータセル
3. 見出しを使って読みやすい表を作る
表の最初の行をthで作ることで、何の情報が並んでいるかがわかりやすくなります。
<table border="1">
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
<tr>
<td>ノートパソコン</td>
<td>98,000円</td>
<td>15</td>
</tr>
<tr>
<td>スマートフォン</td>
<td>68,000円</td>
<td>30</td>
</tr>
</table>
4. 行や列を結合したいときは？
HTMLの表では、横のセルを結合したいときはcolspan、縦のセルを結合したいときはrowspanを使います。
<table border="1">
<tr>
<th colspan="2">社員情報</th>
</tr>
<tr>
<td>名前</td>
<td>山田 一郎</td>
</tr>
<tr>
<td>部署</td>
<td>開発部</td>
</tr>
</table>
5. 表の活用例：スケジュール表を作成
表はスケジュール表にも使えます。曜日と予定を一覧にすると視覚的にとてもわかりやすくなります。
<table border="1">
<tr>
<th>曜日</th>
<th>予定</th>
</tr>
<tr>
<td>月曜日</td>
<td>会議</td>
</tr>
<tr>
<td>火曜日</td>
<td>開発作業</td>
</tr>
<tr>
<td>水曜日</td>
<td>テスト</td>
</tr>
<tr>
<td>木曜日</td>
<td>プレゼン準備</td>
</tr>
<tr>
<td>金曜日</td>
<td>プレゼン発表</td>
</tr>
</table>
