第6章：情報を分かりやすく比較する - 表（テーブル）の作成
商品のスペック比較、料金プランの紹介、機能のメリット・デメリット… ブログで何かを比較検討するとき、文章だけで説明しようとすると、どうしてもゴチャゴチャして分かりにくくなりがちです。
そんな時に絶大なパワーを発揮するのが「テーブル（表）」です。
テーブルを使えば、複雑な情報も一目瞭然。読者の理解を助け、あなたの記事の説得力を何倍にも高めてくれます。今回は、このテーブル作成の基本をマスターしましょう。
テーブルの基本構造：3つのタグで出来ている
HTMLのテーブルは、まるで「畑の畝（うね）」のように、行と列で構成されています。そして、その構造はたった3つの基本タグで成り立っています。
<table>: 畑全体を囲む、テーブルの大枠です。すべての要素は、このタグの内側に配置します。<tr>(Table Row): 横一列の畝です。テーブルの「行」を作成します。<td>(Table Data): 畝に植える野菜一つ一つです。各行の中の「セル（マス目）」を作成し、実際のデータ（文字や画像）を入れます。
まずは、この3つの関係を見てみましょう。<table> という畑の中に <tr> という畝を作り、その中に <td> という野菜を植えていくイメージです。
<table>
<tr>
<td>1行目-1番目のセル</td>
<td>1行目-2番目のセル</td>
</tr>
<tr>
<td>2行目-1番目のセル</td>
<td>2行目-2番目のセル</td>
</tr>
</table><th>で見出しをつけよう！分かりやすさが劇的に向上
さて、先ほどの畑の例では、それぞれの野菜が何なのか一目で分かりませんね。そこで登場するのが <th> (Table Header) タグです。
<th> は、各列や各行の「見出し」となるセルを作成するためのタグです。<td> の代わりに使うことで、そのセルが見出しであることをブラウザや検索エンジンに伝えられます。
<th> を使うと、こんないいことがあります。
- 見た目が分かりやすい: ブラウザは
<th>の中の文字を自動的に太字・中央揃えで表示してくれます。 - 構造が分かりやすい: 音声読み上げソフトが「価格の列、1000円」のように、どの見出しのデータかを読み上げてくれるため、アクセシビリティが向上します。
<th> は通常、テーブルの一番最初の行 (<tr>) に使って、各列のタイトルを示すことが多いです。
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>150円</td>
</tr>
<tr>
<td>バナナ</td>
<td>100円</td>
</tr>
</table>実践例：商品スペック比較表の作り方
それでは、これまでの知識を総動員して、ブロガーが最もよく使うであろう「商品スペックの比較表」を作ってみましょう。ここでは、2つのスマートフォンのスペックを比較する表を作成します。
完成イメージ
| スペック | スマホA | スマホB |
|---|---|---|
| 画面サイズ | 6.1インチ | 6.7インチ |
| バッテリー | 18時間 | 22時間 |
| カメラ画素数 | 12MP | 48MP |
| 価格 | 98,000円 | 128,000円 |
この表をHTMLで書くと、以下のようになります。<table>, <tr>, <th>, <td> がそれぞれどの部分に対応しているか、見比べてみてください。
<table>
<thead>
<tr>
<th>スペック</th>
<th>スマホA</th>
<th>スマホB</th>
</tr>
</thead>
<tbody>
<tr>
<th>画面サイズ</th>
<td>6.1インチ</td>
<td>6.7インチ</td>
</tr>
<tr>
<th>バッテリー</th>
<td>18時間</td>
<td>22時間</td>
</tr>
<tr>
<th>カメラ画素数</th>
<td>12MP</td>
<td>48MP</td>
</tr>
<tr>
<th>価格</th>
<td>98,000円</td>
<td>128,000円</td>
</tr>
</tbody>
</table>このように、タグの構造さえ理解してしまえば、どんなに複雑な情報でも整理して、読者に分かりやすく伝えることができます。ぜひあなたのブログでも活用してみてください。
