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>
6. CSSを使って表のデザインを整える
tableタグは、HTMLだけでも表を作ることができますが、CSSを使うことでデザインを整えることができます。例えば、セルの余白を調整したり、背景色を設定したりすることで、より見やすい表を作成できます。
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>ノートパソコン</td>
<td>98,000円</td>
</tr>
</table>
このようにCSSを使うことで、表の見た目を整えることができ、ユーザーにとって読みやすいデザインにすることができます。
7. tableタグでよく使われるthead・tbody・tfoot
HTMLの表では、thead、tbody、tfootといったタグを使うことで、表の構造をより明確にすることができます。これらのタグを使うと、表の見出し部分・データ部分・フッター部分を整理することができます。
<table border="1">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートパソコン</td>
<td>98,000円</td>
</tr>
<tr>
<td>スマートフォン</td>
<td>68,000円</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>166,000円</td>
</tr>
</tfoot>
</table>
このように表の役割ごとにタグを分けることで、HTMLの構造が分かりやすくなります。
8. tableタグを使うときの注意点
HTMLで表を作るときには、いくつか注意しておきたいポイントがあります。特に、表は「データを整理する目的」で使うことが基本です。
<table border="1">
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>言語</td>
<td>HTML</td>
</tr>
</table>
レイアウト目的で表を使うのではなく、あくまで「表形式のデータ」を表示する場合にtableタグを使用するようにしましょう。これにより、HTMLの構造が整理され、読みやすいページを作ることができます。
