HTMLの表(テーブル)作成を完全攻略！ブロガー向け基礎ドリル【全40問クイズ付】

【HTMLドリル】表（テーブル）で見やすく比較する

商品のスペック比較や料金プランなど、複雑な情報を一目で伝えるには「テーブル（表）」が最強のツールです。

文章でダラダラ書くよりも、表でパッと見せたほうが読者の納得感は段違い。今回は、テーブルを作成する3つの基本タグと、分かりやすくするための見出しタグをマスターしましょう！

---

1. テーブルの基本構造 (table, tr, td)

HTMLの表は「畑（全体）」「畝（行）」「野菜（データ）」の3層構造でできています。この入れ子の関係を理解することが最初のステップです。

やってみよう！基本構造クイズ（10問）

1. テーブル（表）全体を囲む大枠となるタグは ( 　 ) です。
   答えを見る

   <table>

   （すべての表パーツはこの中に書きます。）

2. 表の「行（横一列）」を作成するタグは ( 　 ) です。
   答えを見る

   <tr>

   （Table Row の略です。）

3. 行の中にある一つ一つの「セル（マス目）」を作成し、データを入れるタグは ( 　 ) です。
   答えを見る

   <td>

   （Table Data の略です。）

4. テーブルの構造を畑に例えると、<table> は「畑全体」、<tr> は「畝（うね）」、では <td> は？
   答えを見る

   野菜 (または中身)

   （実際に表示したい文字や画像が入ります。）

5. 3行の表を作る場合、<tr> タグは何回使いますか？
   答えを見る

   3回

   （行の数だけ <tr> を積み重ねます。）

6. 1つの行にセルを4つ作りたい場合、<tr> の中に <td> を何個入れますか？
   答えを見る

   4個

   （横に並べたいデータの数だけ記述します。）

7. <td> タグは、必ずどのタグの「内側」になければなりませんか？
   答えを見る

   <tr>

   （行がないとセルは存在できません。）

8. <tr> タグは、必ずどのタグの「内側」になければなりませんか？
   答えを見る

   <table> (または thead/tbody)

   （表の外には行を作れません。）

9. 文章だけで説明するよりも、テーブルを使うことで情報はどのように変化しますか？
   答えを見る

   整理される (一目瞭然になる)

   （比較検討がしやすくなります。）

10. テーブル作成に必要な基本の3タグは、<table>, <tr>, そして ( 　 ) です。
    答えを見る

    <td>

---

2. 見出しタグ (th) で分かりやすく

ただデータが並んでいるだけでは、それが何の値なのか分かりにくいことがあります。「見出し」専用のタグ <th> を使うことで、デザインも構造も劇的に良くなります。

やってみよう！見出し活用クイズ（10問）

1. 表の「見出し」となるセルを作成するためのタグは ( 　 ) です。
   答えを見る

   <th>

   （Table Header の略です。）

2. <th> タグを使うと、ブラウザではデフォルトで文字がどのように表示されますか？（2つの特徴）
   答えを見る

   太字・中央揃え

   （見た目だけで「見出しだ」と分かります。）

3. <th> は、通常 <td> の ( 　 ) に使用します。
   答えを見る

   代わり (置き換え)

   （セルの一種なので、tdと同じ場所に置けます。）

4. 表の一番上の行 (1行目) には、通常 <td> ではなく ( 　 ) が多く使われます。
   答えを見る

   <th>

   （各列のタイトルになるためです。）

5. 音声読み上げソフトが「価格の列、1000円」のように読み上げてくれるのは、<th> を使うことによる ( 　 ) 向上のメリットです。
   答えを見る

   アクセシビリティ

   （構造が明確になるため、機械にも優しくなります。）

6. 商品比較表で、左端の列に「項目名（価格、サイズなど）」を並べる場合、そこにはどのタグを使うのが適切ですか？
   答えを見る

   <th>

   （行の見出しとして機能するため。）

7. <th> タグを使うことで、そのセルが見出しであることを ( 　 ) や検索エンジンに伝えることができます。
   答えを見る

   ブラウザ

8. 「Table Header」の略であるタグは？
   答えを見る

   <th>

9. テーブル内で <th> と <td> を適切に使い分けることで、表の ( 　 ) が高まります。
   答えを見る

   分かりやすさ (または説得力)

10. <th> の中に画像を入れることはできますか？
    答えを見る

    できる

    （商品画像のアイコンを見出しにすることも可能です。）

---

3. 実践！商品スペック比較表の作り方

実際にブログでよく使う「スマホ比較表」などをイメージして、具体的な構成方法を学びましょう。<thead> や <tbody> といったグループ化タグも登場します。

やってみよう！表作成の実践クイズ（10問）

1. 商品スペック比較表などを作る際、記事の ( 　 ) を高めるためにテーブルは非常に有効です。
   答えを見る

   説得力

   （比較が容易になり、読者が決断しやすくなります。）

2. 表の「ヘッダー部分（見出し行のグループ）」を定義するタグは ( 　 ) です。
   答えを見る

   <thead>

   （Table Head の略。<tr>を囲みます。）

3. 表の「データ本体部分（中身の行グループ）」を定義するタグは ( 　 ) です。
   答えを見る

   <tbody>

   （Table Body の略。データの<tr>達を囲みます。）

4. 「スマホA」と「スマホB」を比較する表で、1行目に「商品名」を並べる場合、セルはいくつ必要ですか？（見出し列「項目」含む）
   答えを見る

   3つ

   （「項目」「スマホA」「スマホB」の3列構成になります。）

5. <thead> や <tbody> を使う場合、これらはどのタグの直下に置きますか？
   答えを見る

   <table>

   （table > thead > tr という階層になります。）

6. 比較表の各行（価格、画面サイズなど）の先頭セルには、<td> ではなく <th> を使うと、どんな効果がありますか？
   答えを見る

   行の見出しとして目立つ

   （「ここから横は価格の話ですよ」と明確になります。）

7. テーブルの中にデータとして「価格」を入れる際、数字だけでなく「円」や「$」をつけるのはなぜですか？
   答えを見る

   単位を明確にするため

   （読者にとっての分かりやすさを最優先します。）

8. 2つの商品を比較する場合、最低でも何列のテーブルが必要ですか？
   答えを見る

   2列 (または項目名を入れて3列)

9. 表が縦に長くなりすぎる場合、どうするのが良いですか？（ヒント：構造の工夫）
   答えを見る

   行と列を入れ替える (など)

   （スマホで見やすいようにレイアウトを工夫します。）

10. タグの構造（入れ子）を正しく理解していれば、どんなに ( 　 ) な情報でも整理して伝えることができます。
    答えを見る

    複雑

---

4. コード完成クイズ：正しいのはどっち？

最後は実践編です！作りたい表の形に合わせて、正しいタグを選んでコードを完成させましょう。

やってみよう！コード穴埋めクイズ（10問）

1. 表を作成するために、一番外側を囲むタグは？

   <[ ? ]>
   ...
   </[ ? ]>

   選択肢： A. tab / B. table / C. grid

   答えを見る

   正解： B. table

   解説： 表全体は必ず table タグで囲みます。

2. 新しい「行」を開始したい。

   <[ ? ]>
   <td>データ</td>
   </[ ? ]>

   選択肢： A. tr / B. td / C. row

   答えを見る

   正解： A. tr

   解説： Table Row (行) を作るのは tr です。

3. 表の1行目に「タイトル（見出し）」を入れたい。

   <tr>
   <[ ? ]>商品名</[ ? ]>
   </tr>

   選択肢： A. td / B. th / C. head

   答えを見る

   正解： B. th

   解説： 見出しセルは th (Table Header) を使います。

4. 表の中に「データ（中身）」を入れたい。

   <tr>
   <[ ? ]>100円</[ ? ]>
   </tr>

   選択肢： A. td / B. th / C. dt

   答えを見る

   正解： A. td

   解説： 通常のデータセルは td (Table Data) を使います。

5. 見出しエリアをグループ化して分かりやすくしたい。

   <table>
   <[ ? ]>
   <tr>...</tr>
   </[ ? ]>
   <tbody>...</tbody>
   </table>

   選択肢： A. thead / B. top / C. header

   答えを見る

   正解： A. thead

   解説： ヘッダー行をまとめるのは thead です。

6. 正しい入れ子（ネスト）の順番は？

   [ ? ]

   選択肢： A. table > td > tr / B. table > tr > td

   答えを見る

   正解： B. table > tr > td

   解説： テーブルの中に「行(tr)」があり、行の中に「セル(td)」があります。

7. thタグを使った時、ブラウザでの見た目はどうなる？

   <th>タイトル</th>

   選択肢： A. 太字・中央揃え / B. 赤字・左揃え

   答えを見る

   正解： A. 太字・中央揃え

   解説： デフォルトのスタイルとして強調表示されます。

8. 3列の表を作りたい時、1つのtrの中にtdをいくつ書く？

   <tr>
   <td>...</td>
   [ ? ]個
   </tr>

   選択肢： A. 1個 / B. 3個

   答えを見る

   正解： B. 3個

   解説： 列の数だけtdを並べます。

9. 表の本体部分をグループ化したい。

   <thead>...</thead>
   <[ ? ]>
   <tr>...</tr>
   </[ ? ]>

   選択肢： A. tbody / B. tmain / C. body

   答えを見る

   正解： A. tbody

   解説： データ本体のグループは tbody です。

10. セルの中に画像を表示したい。

    <td>
    <[ ? ] src="img.jpg">
    </td>

    選択肢： A. img / B. image / C. pic

    答えを見る

    正解： A. img

    解説： tdの中にimgタグを入れることで画像を表示できます。

---

まとめ

全40問、お疲れ様でした！

テーブルの基本構造「table > tr > td」と、見出しの「th」を使いこなせれば、ブログでの表現力は格段に上がります。読者にとって分かりやすい比較表を作って、説得力のある記事を目指しましょう！