Sample lesson

無料サンプルレッスン：
HTML：行と列が伝わる表

表の見出しを見た目だけで済ませず、caption・th・scopeで関係を示します。行の入れ替えと一セルの更新を通して、原稿との照合まで練習する無料レッスンです。

1. ゴールと準備

一つの時刻について「どの部屋の何曜日か」を、見た目とHTMLの両方から説明できる表を作ります。HTMLの基本要素を学んだ人向けです。エディターとブラウザーを用意し、練習用フォルダで作業してください。

この課題・初稿・レビューは編集部が作った架空のサンプルです。実際の受講者の提出物や講師による個別評価ではありません。セル結合のない、小さなデータ表だけを扱います。

2. 課題：四つの値を取り違えずに載せる

工作室の開始時刻は、木工室が土曜10時・日曜11時、紙工作室が土曜13時・日曜10時です。表の名前、曜日の列見出し、部屋の行見出しを付けてください。行を入れ替えても意味が崩れないことが条件です。

提出物はHTMLファイルと、「紙工作室の日曜日は10時」のように四つの値を文章へ戻した確認メモです。単に太字や背景色を付けた画像を提出する課題ではありません。

3. 初稿：太字だけでは関係が残らない

<table>
  <tr><td><b>部屋</b></td><td><b>土曜</b></td><td><b>日曜</b></td></tr>
  <tr><td>木工室</td><td>10時</td><td>11時</td></tr>
  <tr><td>紙工作室</td><td>13時</td><td>10時</td></tr>
</table>

初稿はbodyへ置く断片です。数値は合っていますが、すべてtdなので、どのセルが見出しかをHTMLで区別していません。表の名前も周囲の文章に頼っています。

4. レビュー例：セルの役割を先に確定する

曜日は列全体を説明するためthとscope="col"にします。色を変える前に、どの値を説明しているかを確認します。
部屋名はその行の時刻を説明するためthとscope="row"にします。部屋名にcolを付けると向きが違うので、右へ読む関係と照合します。
captionで表の内容を識別します。「表1」だけでなく、何の時刻かを示します。ページ全体のh1は別に残します。

参考：MDNのthとscope（2026年10月27日確認）。複雑な結合表では、この一段のscopeの例だけで対応しきれない場合があります。

5. 修正版：一枚で開けるHTML

次をtable-practice.htmlとして保存して開きます。CSSは表示を整えるためのもので、見出しの関係はthとscopeが担当します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>工作室の開始時刻（練習）</title>
<style>
body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
main { max-width: 42rem; margin-inline: auto; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: .5rem; }
th, td { border: 1px solid #777; padding: .5rem; text-align: left; }
th { background: #fff0dd; }
</style>
</head>
<body>
<main>
<h1>工作室の案内（架空の練習）</h1>
<table>
  <caption>土日それぞれの利用開始時刻</caption>
  <thead><tr><th scope="col">部屋</th><th scope="col">土曜日</th><th scope="col">日曜日</th></tr></thead>
  <tbody>
    <tr><th scope="row">木工室</th><td>10時</td><td>11時</td></tr>
    <tr><th scope="row">紙工作室</th><td>13時</td><td>10時</td></tr>
  </tbody>
</table>
</main>
</body>
</html>