結合のためのcolspanとrowspan
列や行をまたいでセルを結合します。
「結合のためのcolspanとrowspan」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
セルの結合とは
デフォルトでは、各テーブルセルは1つの行と1つの列を占有します。結合を使うと、セルを複数の列または行にまたがらせることができます：
colspan— 複数の列にまたがる- rowspan — 複数の行にまたがる
colspan
colspan属性を使うと、セルを複数の列にまたがらせることができます：
<table>
<tr>
<th colspan="3">2024 Quarterly Sales</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>$10k</td>
<td>$12k</td>
<td>$15k</td>
</tr>
</table>rowspan
rowspan属性を使うと、セルを複数の行にまたがらせることができます：
<table>
<tr>
<th rowspan="2">John</th>
<td>HTML</td>
<td>95</td>
</tr>
<tr>
<!-- no th here — John's cell spans this row -->
<td>CSS</td>
<td>88</td>
</tr>
</table>colspanとrowspanの併用
1つのセルで両方の属性を組み合わせることができます：
<table>
<tr>
<th colspan="2" rowspan="2">Top-Left Corner</th>
<th>Col 3</th>
</tr>
<tr>
<td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>
</table>結合セルを考慮した記述
セルが複数の列にまたがる場合、またがった行ではそれらの列を省略します：
<table>
<tr>
<td colspan="2">Spans 2 columns</td>
<!-- This row has: 1 td = 2 columns wide -->
<td>Third column</td>
</tr>
<tr>
<td>Col 1</td> <!-- back to 1 column each -->
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>結合の一般的なパターン
実際のテーブルで使われる結合の例：
<!-- Group header spanning all data columns -->
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Test Scores</th>
</tr>
<tr>
<th>Math</th><th>Science</th><th>English</th>
</tr>
</thead>結合した行見出しにrowspanを使う
rowspanを使うと、結合した行グループのラベルを作成できます：
<tbody>
<tr>
<th rowspan="3">Frontend</th>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<!-- Frontend spans this row -->
<td>CSS</td>
<td>Presentation</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Behavior</td>
</tr>
</tbody>colspan=0 — 全幅のセル
colspanに0を指定すると、列グループ内に残っているすべての列にまたがります（ほとんど使われません）：
<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>結合とアクセシビリティ
複雑な結合を含むテーブルでは、スクリーンリーダーのためにscope属性とheaders属性が必要です：
<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->
<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>結合に関する問題のデバッグ
結合でよくある間違い：
- 結合後の行にセルが多すぎる、または少なすぎる
- rowspanが行数を超えている
- 結合が重なっている（2つのセルが同じ位置を指定している）
表示がおかしい場合は、ブラウザーのDevToolsでテーブル構造を確認します。
結合セルのCSS
複数の列または行にまたがるセルにスタイルを設定します：
[colspan] {
text-align: center;
font-weight: bold;
background-color: #e2e8f0;
}
/* Or use attribute selectors for specific spans: */
[colspan="3"] {
background-color: #dbeafe;
}印刷とセルの結合
最新のブラウザーでは、結合セルは正しく印刷されます。ただし、次の点に注意してください：
- theadの行が列にまたがっている場合、印刷される各ページで正しく繰り返されます
- tbody内のrowspanは、ページ区切りをまたいで繰り返されません
- 複雑なテーブルは、公開前に印刷プレビューでテストします
確認問題
3列分を占めるテーブルセルがあります。どの属性を使いますか？
振り返り：colspanとrowspan
セルの結合の基本：
colspan— セルを複数の列にまたがらせますrowspan— セルを複数の行にまたがらせます- 結合セルを考慮し、結合で覆われるセルは省略します
- 結合した見出しのアクセシビリティには、
scope="colgroup"を追加します - レイアウトの問題のデバッグにはDevToolsを使います
よくある質問
「結合のためのcolspanとrowspan」レッスンは無料ですか？
はい。「結合のためのcolspanとrowspan」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「結合のためのcolspanとrowspan」で何を学びますか？
列や行をまたいでセルを結合します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「結合のためのcolspanとrowspan」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- table、tr、td、th
- thead、tbody、tfootの構造
- 結合のためのcolspanとrowspan
- テーブルのアクセシビリティ：scope、summary、caption