← カテゴリ一覧に戻る

セル結合

colspan, rowspan

colspan は横方向（列）、rowspan は縦方向（行）のセルを結合します。 セルが重ならないよう、結合した分だけ td / th の数を減らす必要があります。

デモ：colspan — 横方向のセル結合

例：試験結果（科目グループをまとめて表示）

氏名文系科目理系科目合計
国語英語数学理科
田中 太郎85789288343
鈴木 花子90957280337

「文系科目」「理系科目」は colspan=2、「氏名」「合計」は rowspan=2 で2行分を結合

デモ：rowspan — 縦方向のセル結合

例：時間割（同じ講義が複数コマにまたがる）

時限月火水
1限線形代数
(2コマ連続)		英会話統計学
2限プログラミング統計学
3限経済学哲学自由

月曜1限の「線形代数」は rowspan=2 で2行分を結合。月曜2限の td は省略

コード例

<!-- colspan の例 -->
<table>
  <thead>
    <tr>
      <th rowspan="2">氏名</th>
      <!-- colspan="2" で「文系科目」が2列を占有 -->
      <th colspan="2">文系科目</th>
      <th colspan="2">理系科目</th>
      <th rowspan="2">合計</th>
    </tr>
    <tr>
      <!-- 氏名・合計の th は rowspan で2行目には不要 -->
      <th>国語</th>
      <th>英語</th>
      <th>数学</th>
      <th>理科</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">田中 太郎</th>
      <td>85</td>
      <td>78</td>
      <td>92</td>
      <td>88</td>
      <td>343</td>
    </tr>
  </tbody>
</table>

<!-- rowspan の例 -->
<table>
  <tbody>
    <tr>
      <th>1限</th>
      <!-- rowspan="2" で1限・2限にまたがる -->
      <td rowspan="2">線形代数</td>
      <td>英会話</td>
    </tr>
    <tr>
      <th>2限</th>
      <!-- 月曜2限の td は省略（rowspanセルが占有） -->
      <td>プログラミング</td>
    </tr>
  </tbody>
</table>

Tipscolspan / rowspan で重複するセルを作らない

  • colspan="N" を使ったら、その行の td/th の数を N-1 個減らす
  • rowspan="N" を使ったら、続く N-1 行でそのセルの位置の td/th を省略する
  • colspan と rowspan を同時に使う場合は、結合が占有するセルの総数（縦×横）をしっかり計算する
  • セルが重なると表示が崩れるため、設計を図で確認してから実装すると安全

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `colspan` と `rowspan` を使ってセルを結合するとき、省略すべき `td`/`th` の数の計算方法を教えてください。
- `colspan` と `rowspan` を同時に使う複合結合で、セルがずれないように設計する方法を教えてください。
- 複雑なセル結合テーブルで、スクリーンリーダーが正しくヘッダーを読み上げるようにする `scope`・`headers` 属性の使い方を教えてください。
- `colspan` を使う典型的なユースケース（試験結果・スケジュール表など）の HTML 実装例を教えてください。
- セル結合テーブルをレスポンシブ対応する場合の課題と、その解決策を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo