こんにちは、Tomaです。
HTML基礎講座も今回で4回目。これまでに基本タグや画像表示をマスターしてきましたね。今回は、ゲームのステータス比較や機材のスペック紹介に欠かせない「表組み（テーブルタグ）」を深掘りします。
「難しそう」と敬遠されがちなタグですが、構造さえ理解してしまえば、情報の整理がぐっと楽になりますよ。
第7章：データを美しく整理する「tableタグ」の仕組み
HTMLで表を作るには、複数のタグを組み合わせて「入れ子」構造にする必要があります。基本となるのは以下の3つです。
<table>：表全体を囲む<tr>：表の「行（横一行）」を作る<td>：表の「セル（中身）」を作る
1. 基本的な表の書き方
例えば、武器の攻撃力を比較するシンプルな表は以下のように記述します。
<table border="1">
<tr>
<td>武器名</td>
<td>攻撃力</td>
</tr>
<tr>
<td>鉄の剣</td>
<td>100</td>
</tr>
</table>2. 見出しを作る「thタグ」
一番上の行を「見出し」として強調したい場合は、<td>の代わりに<th>を使います。これを使うと、多くのブラウザで文字が太字になり、中央揃えで表示されます。
【実際の表示イメージ】
| 武器名（th） | 属性（th） |
|---|---|
| 炎の剣 | 火 |
【おまけ】表の中身を「自由自在」に揃えるテクニック
表を作っていると、文字の配置を細かく調整したくなることがあります。そんな時は、style属性を使って指示を出しましょう。
左右の配置（text-align）
- 左揃え：
text-align: left; - 中央揃え：
text-align: center; - 右揃え：
text-align: right;
上下の配置（vertical-align）
セルの高さがある場合、文字を上・中・下のどこに置くかを決めることができます。
- 上揃え（TOP）：
vertical-align: top; - 中央揃え（MIDDLE）：
vertical-align: middle;（デフォルト） - 下揃え（BOTTOM）：
vertical-align: bottom;
【実際の表示イメージ】
| 上・左揃え | 中・中央揃え | 下・右揃え |
第8章：なぜブログに「表」が必要なのか？
エンジニアとして製品評価に関わっていると実感することですが、「数値の比較」はテキストよりも表形式の方が圧倒的に誤認が少ないのです。
ゲームブログでも、「A装備とB装備、どっちが強いか？」を文章だけで説明するより、表で並べる方が読者は一瞬で理解できます。これがブログの「読みやすさ」＝「ユーザー満足度」に直結します。
まとめ
表組みはHTMLの中でも少しパズルに似た感覚がありますが、基本は「行（tr）を作って、その中に中身（td）を入れる」の繰り返しです。配置（align）までマスターすれば、どんなデータも読みやすく整理できるようになります。
まずは2行2列くらいの小さな表から、自分のブログに取り入れてみてください。データの説得力が驚くほど変わるはずです！
