colspanとrowspanの違い

📝 問題の再掲

Q43: テーブルのセルを横方向に2つ結合する属性はどれですか？

選択肢: merge / span / colspan（正答） / rowspan

⚠️ よくある間違い

col = column（列）なのに「横方向」、row = 行なのに「縦方向」という点が混乱を招きます。「何をまたぐか」で考えるとわかりやすくなります。

📖 段階的な説明

ステップ1：名前を分解して理解する

• col-span = column（列）を span（またぐ）→ 複数の列にまたがる → 横に広がる
• row-span = row（行）を span（またぐ）→ 複数の行にまたがる → 縦に広がる

ステップ2：図で理解する

colspan="2" の場合（横に2列分）:
┌────────────────┐
│  結合セル       │  ← 2列分の幅
└────────────────┘

rowspan="2" の場合（縦に2行分）:
┌────┐
│    │  ← 2行分の高さ
│    │
└────┘

ステップ3：覚え方

「colspanは横長、rowspanは縦長」と覚えましょう。

💻 コード例

時間割表の例：

<table border="1">
  <tr>
    <th></th><th>月</th><th>火</th>
  </tr>
  <tr>
    <td>1限</td>
    <td colspan="2">全校集会</td> <!-- 横に2列分 -->
  </tr>
  <tr>
    <td>2限</td>
    <td rowspan="2">体育</td> <!-- 縦に2行分 -->
    <td>英語</td>
  </tr>
  <tr>
    <td>3限</td>
    <!-- 体育が上から続いているので、ここは1セル少ない -->
    <td>数学</td>
  </tr>
</table>

🔗 関連知識

• 結合したセルの分だけ、その行の <td> を減らす必要があります
• 複雑な結合はCSSのGridレイアウトで代替することもあります

✅ 確認問題

Q: セルを縦方向に3行分結合する正しい書き方はどれ？

A: colspan="3" / B: rowspan="3"