6日でできる 新HTML&CSS入門｜セル結合とテーブルレイアウト
セル結合を理解すれば、表はもっと見やすく整理できる。colspanとrowspanを使って、伝わりやすいテーブルレイアウトを作ろう。
HTMLのテーブルは、行と列を使って情報を整理するための便利な仕組みです。名簿、予定表、料金表、時間割、セミナーのスケジュールなど、同じ種類の情報を並べて見せたいときに活躍します。
基本的なテーブルでは、各行に同じ数のセルを並べることで、きれいな表を作ります。しかし、実際に表を作っていると、すべてのセルを同じ大きさで並べるだけでは表現しにくい場面が出てきます。
たとえば、表の上部に大きな見出しを置きたい場合があります。月曜日から金曜日までの5列をまとめて、「今週の予定」という大きな見出しにしたいこともあるでしょう。また、同じ分類に属する複数行を、左側の1つの見出しセルでまとめたい場合もあります。
このようなときに使うのが、colspanとrowspanです。colspanは横方向にセルを結合する属性で、rowspanは縦方向にセルを結合する属性です。
セル結合を使えるようになると、単純な格子状の表だけでなく、見出しを大きくまとめたり、共通する項目を整理したりできるようになります。ただし、セルを結合すると、その分だけ他の行や列のセル数を調整する必要があります。ここを意識しないと、表の列がずれたり、思った形にならなかったりします。
この記事では、横方向の結合、縦方向の結合、横と縦を組み合わせた複合的な結合の順番で、セル結合の考え方を丁寧に解説していきます。
セル結合は表の情報を整理するために使う
セル結合とは、複数のセルをひとつのセルのようにまとめて表示することです。横方向にまとめる場合はcolspan、縦方向にまとめる場合はrowspanを使います。
| 属性 | 結合する方向 | 指定する値 | 主な使い方 |
|---|---|---|---|
| colspan | 横方向 | 結合したい列数 | 複数列にまたがる見出しを作る |
| rowspan | 縦方向 | 結合したい行数 | 複数行に共通する見出しを作る |
たとえば、5つの曜日列をまとめて「平日の予定」と表示したい場合は、横方向の結合であるcolspanを使います。
一方、3人のメンバーが同じ部署に所属していることを、左側の1つのセルでまとめて表示したい場合は、縦方向の結合であるrowspanを使います。
セル結合は、単に見た目を変えるためだけではありません。複数のデータがどの見出しに属しているのか、どの項目が共通しているのかを分かりやすくするために使います。
図1：colspanとrowspanの基本イメージ
この図から分かること
この図から、セル結合には横方向と縦方向の2種類があることが分かります。
colspanは、指定したセルから右方向へ複数列分をまとめるときに使います。たとえば、colspanに5を指定すると、そのセルは横方向に5列分の幅を持つセルになります。
rowspanは、指定したセルから下方向へ複数行分をまとめるときに使います。たとえば、rowspanに3を指定すると、そのセルは縦方向に3行分の高さを持つセルになります。
セル結合を使うと、表の中に大きな見出しや共通ラベルを作れるため、情報のまとまりが読み取りやすくなります。ただし、結合した分だけ他のセル数を調整する必要があるため、表全体の列数や行数を意識しながら書くことが大切です。
横方向にセルを結合するcolspan
colspanは、セルを横方向に結合するための属性です。付けられる対象はthまたはtdです。
値には、横方向にまとめたい列数を指定します。たとえば、colspanに5を指定すると、そのセルは右方向へ5列分の幅を使います。
| 項目 | 内容 |
|---|---|
| 属性名 | colspan |
| 付ける場所 | thまたはtd |
| 値 | 結合したい列数 |
| 結合方向 | 横方向 |
| 主な用途 | 大きな見出し、分類見出し、合計欄など |
横方向の結合は、表の上部に大きなタイトルを置きたいときによく使います。
たとえば、月曜日、火曜日、水曜日、木曜日、金曜日の5列がある予定表で、その上に「平日の作業予定」という見出しを1つ置きたい場合、見出しセルにcolspanを指定します。
このとき、見出しセルは1つしか書きませんが、横方向には5列分を使います。そのため、下の行にある5つの曜日セルと幅がそろいます。
colspanを使うときは列数の合計をそろえる
colspanを使うときに大切なのは、表全体の列数を意識することです。
たとえば、基本の表が5列でできている場合、ある行にcolspan 5のセルを1つ置くと、その行はそれだけで5列分を使ったことになります。
| 行の内容 | 実際のセル数 | 表として使う列数 |
|---|---|---|
| colspan 5の見出しセル | 1個 | 5列分 |
| 曜日セル5個 | 5個 | 5列分 |
| 予定セル5個 | 5個 | 5列分 |
見た目としては、1行目のセル数は1つ、2行目のセル数は5つです。しかし、表としての幅はどちらも5列分です。この「表として使う列数」をそろえることが、セル結合で表を崩さないポイントです。
横方向のセル結合を使ったサンプル
ここでは、平日の学習予定を表にします。1行目に5列分をまとめた大きな見出しを置き、2行目に曜日、3行目に予定を並べます。
ファイル名： lesson15_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横方向のセル結合</title>
</head>
<body>
<h1>平日の学習予定</h1>
<table border="1">
<tr>
<th colspan="5">学習スケジュール（平日5日分）</th>
</tr>
<tr>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
</tr>
<tr>
<td>HTML復習</td>
<td>リスト練習</td>
<td>リンク作成</td>
<td>テーブル作成</td>
<td>確認テスト</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、最初の行に「学習スケジュール（平日5日分）」という見出しが横いっぱいに表示されます。その下に、月曜日から金曜日までの5列が並びます。
| 学習スケジュール（平日5日分） | ||||
|---|---|---|---|---|
| 月 | 火 | 水 | 木 | 金 |
| HTML復習 | リスト練習 | リンク作成 | テーブル作成 | 確認テスト |
1行目のthにはcolspanに5を指定しています。そのため、1つの見出しセルが5列分の幅を持ちます。
2行目と3行目には、それぞれ5つのセルがあります。1行目はセルが1つでも、colspanによって5列分として扱われるため、表全体の列幅がそろいます。
colspanで作れる表の形
colspanは、複数の列をまとめた見出しを作るときに便利です。
| 使い方 | 例 |
|---|---|
| 表全体の大見出し | 5日分の予定、料金比較表、講座一覧 |
| 複数列の分類見出し | 基本情報、連絡先、成績項目 |
| 合計欄 | 複数列をまとめて合計と表示する |
| 備考欄 | 横幅を広く使って説明を書く |
特に、表の上部に大きなタイトルを置きたい場合や、いくつかの列をグループとして見せたい場合に向いています。
ただし、colspanを多用しすぎると、表の構造が読み取りにくくなることがあります。まずは通常の行と列で表を作り、必要な部分だけ結合するようにすると、分かりやすいテーブルになります。
縦方向にセルを結合するrowspan
rowspanは、セルを縦方向に結合するための属性です。付けられる対象はthまたはtdです。
値には、縦方向にまとめたい行数を指定します。たとえば、rowspanに3を指定すると、そのセルは下方向へ3行分の高さを使います。
| 項目 | 内容 |
|---|---|
| 属性名 | rowspan |
| 付ける場所 | thまたはtd |
| 値 | 結合したい行数 |
| 結合方向 | 縦方向 |
| 主な用途 | 部署名、分類名、日付、時間帯などの共通ラベル |
縦方向の結合は、複数行に共通する情報をひとつにまとめたいときに使います。
たとえば、同じ部署に3人の社員がいる場合、左側のセルに部署名を1つだけ表示し、その部署名を3行分にまたがらせることができます。
図2：rowspanで共通する行ラベルをまとめる
この図から分かること
この図から、rowspanを使うと、複数行に共通する見出しや分類名をひとつのセルにまとめられることが分かります。
同じ部署名や分類名を何度も書くと、表が少し読みにくくなることがあります。rowspanを使えば、共通する情報を1つにまとめ、関連するデータが同じグループに属していることを分かりやすく示せます。
ただし、rowspanを指定したセルが下方向の行を占有するため、その下の行では、すでに結合されている位置のセルを書かないようにします。この考え方が、縦方向の結合でとても重要です。
rowspanを使うときは下の行のセルを省く
rowspanを使うと、指定したセルが下方向の複数行分を使います。そのため、下の行では、すでに上のセルが占有している列にtdやthを書きません。
たとえば、左側の見出しセルが3行分を使っている場合、2行目と3行目では左側のセルを省き、右側のデータセルだけを書きます。
| 行 | 左側のセル | 右側のセル |
|---|---|---|
| 1行目 | rowspan 3の見出しセル | 1人目の名前 |
| 2行目 | 省略する | 2人目の名前 |
| 3行目 | 省略する | 3人目の名前 |
この「省略する」という考え方を忘れると、セルが余分に増えて、表の列がずれてしまいます。
rowspanを使うときは、結合セルがどの行まで広がっているかを確認しながら、下の行のセル数を調整しましょう。
縦方向のセル結合を使ったサンプル
ここでは、部署ごとのメンバー一覧を作ります。左側に部署名を表示し、その部署名を3行分に結合します。
ファイル名： lesson15_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦方向のセル結合</title>
</head>
<body>
<h1>制作部メンバー</h1>
<table border="1">
<tr>
<th rowspan="3">制作部</th>
<td>佐藤</td>
</tr>
<tr>
<td>中村</td>
</tr>
<tr>
<td>小林</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、左側に「制作部」というセルが縦方向に3行分表示され、右側に3人の名前が並びます。
見た目としては、左側の「制作部」が3人分の行にまたがって表示されます。
1行目のthにはrowspanに3を指定しています。そのため、このthは1行目から3行目までの高さを使います。
2行目と3行目では、左側のセルをすでに「制作部」が使っているため、tdは1つだけ書きます。ここで左側のセルをもう一度書いてしまうと、表の列がずれてしまいます。
rowspanで作れる表の形
rowspanは、同じ分類に属する複数の行をまとめたいときに便利です。
| 使い方 | 例 |
|---|---|
| 部署名をまとめる | 営業部、制作部、管理部など |
| 日付をまとめる | 同じ日の複数予定 |
| 時間帯をまとめる | 午前、午後、夜間など |
| 分類名をまとめる | 基礎、応用、実践など |
| 担当者をまとめる | 同じ担当者の複数作業 |
rowspanを使うことで、同じ内容を何度も繰り返さずに済みます。表全体がすっきりし、どのデータが同じグループに属しているのかが分かりやすくなります。
ただし、縦方向の結合は、下の行のセル数に影響します。慣れないうちは、結合後の表を紙に描いてからHTMLを書くと、セルの位置を確認しやすくなります。
横方向と縦方向を組み合わせる
colspanとrowspanは、単独で使うだけでなく、同じテーブルの中で組み合わせることもできます。
横方向の大きな見出しを作りながら、縦方向の分類セルも作ることで、より複雑なスケジュール表や一覧表を作れるようになります。
ただし、横方向と縦方向を同時に扱う場合は、表全体の列数をより意識する必要があります。
| 意識すること | 内容 |
|---|---|
| 表全体の基本列数 | 何列の表として作るのかを決める |
| colspanの値 | そのセルが何列分を使うのかを確認する |
| rowspanの値 | そのセルが何行分を使うのかを確認する |
| 下の行の不足セル | rowspanで占有される位置のセルを省く |
| 各行の幅合計 | すべての行で列数の合計をそろえる |
複合結合では、見た目のセル数と、実際に占有している列数が違うことがあります。
たとえば、セルが1つしかない行でも、colspanに4を指定していれば、そのセルは4列分を使っています。rowspanで縦方向に結合したセルがある場合、その下の行では、その列に相当するセルを書かないようにします。
複合結合では幅の合計をそろえる
横方向と縦方向を組み合わせたテーブルで大切なのは、各行の列幅の合計をそろえることです。
見た目のセル数だけで判断するのではなく、colspanで何列分を使っているか、rowspanでどの位置を占有しているかを考えます。
| 行 | 内容 | 列幅の考え方 |
|---|---|---|
| 1行目 | colspan 4の見出し | 1セルで4列分 |
| 2行目 | rowspan 2の見出し、colspan 2のセル、通常セル | 合計4列分 |
| 3行目 | colspan 3のセル | rowspanの1列分を省き、残り3列分 |
| 4行目 | 通常セル4つ | 合計4列分 |
このように、各行の見た目のセル数は違っていても、表として使う列数の合計がそろっていれば、きれいに表示されます。
逆に、ある行だけ列数の合計が足りなかったり多かったりすると、表の見た目がずれることがあります。
図3：横方向と縦方向を組み合わせたセル結合
この図から分かること
この図から、colspanとrowspanを組み合わせると、より自由度の高いテーブルを作れることが分かります。
最上段では、colspanによって複数列にまたがる大きな見出しを作っています。左側では、rowspanによって同じ時間帯に属する複数行をまとめています。
複合結合では、各行の見た目のセル数が同じとは限りません。しかし、colspanで使っている列数、rowspanで占有されている列を考えながら、各行の列幅の合計をそろえることが大切です。
rowspanがある下の行では、すでに上から伸びているセルの位置に別のセルを書かないようにします。これが、セル結合を使っても表を崩さないための重要なポイントです。
複合セル結合を使ったサンプル
ここでは、1日の講習スケジュールを表にしてみます。最上段に4列分の大きな見出しを置き、午前の行ラベルを2行分に結合します。
ファイル名： lesson15_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複合セル結合</title>
</head>
<body>
<h1>Web制作講習スケジュール</h1>
<table border="1">
<tr>
<th colspan="4">1日講習の流れ</th>
</tr>
<tr>
<th rowspan="2">午前</th>
<td colspan="2">HTMLの基本確認</td>
<td>質問タイム</td>
</tr>
<tr>
<td colspan="3">テーブル作成の演習</td>
</tr>
<tr>
<th>午後</th>
<td>セル結合の練習</td>
<td>確認課題</td>
<td>振り返り</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、「1日講習の流れ」という見出しが4列分を使って表示されます。その下では、午前のセルが2行分に結合され、午前中の内容が2段に分かれて表示されます。
このサンプルでは、1行目のthにcolspan 4を指定しています。そのため、1つの見出しセルが4列分を使います。
2行目では、午前のthにrowspan 2を指定しています。このセルは、2行目と3行目の2行分を使います。
2行目の「HTMLの基本確認」は、colspan 2によって2列分を使っています。その右側に「質問タイム」のtdが1つあります。左側の午前セルが1列分、HTMLの基本確認が2列分、質問タイムが1列分なので、合計4列分になります。
3行目では、午前セルがすでにrowspanで左側の1列を使っているため、左側のセルは書きません。残りの3列分を、colspan 3を指定した「テーブル作成の演習」のtdで使っています。
4行目は通常の4列です。午後、セル結合の練習、確認課題、振り返りの4つのセルが並びます。
複合結合で表を崩さない考え方
複合結合では、各行のセル数を単純に数えるだけではなく、セルが何列分、何行分を使っているかを考える必要があります。
| 確認する点 | 内容 |
|---|---|
| colspanの値 | 横方向に何列分を使うか |
| rowspanの値 | 縦方向に何行分を使うか |
| rowspanの下の行 | 結合セルがある位置のセルを省く |
| 各行の列幅合計 | 表全体の基本列数と合っているか |
| 見出しとデータの対応 | thとtdの役割が自然か |
特にrowspanを使った下の行では、セルを書きすぎないことが重要です。上の行から伸びてきたセルがすでに場所を使っているため、その位置に新しいtdを書く必要はありません。
セル結合を使った表が崩れる場合は、まず表全体が何列構成なのかを決めます。そのうえで、各行がその列数に合っているかを確認します。
セル結合に使うタグと属性を整理する
セル結合で登場する主なタグと属性を整理しておきましょう。
| 要素または属性 | 用途 | 注意点 |
|---|---|---|
| table | テーブル全体を作る | tr、th、tdを内側に配置する |
| tr | 行を作る | 行ごとに列幅の合計を意識する |
| th | 見出しセルを作る | 項目名や分類名に使う |
| td | データセルを作る | 実際の内容を入れる |
| colspan | 横方向にセルを結合する | 値はまとめたい列数 |
| rowspan | 縦方向にセルを結合する | 値はまとめたい行数 |
| border | 枠線を表示する | 学習段階では構造確認に便利 |
まずは、table、tr、th、tdの基本構造を理解することが大切です。そのうえで、横方向にまとめたい場合はcolspan、縦方向にまとめたい場合はrowspanを使います。
colspanやrowspanは、thにもtdにも指定できます。見出しセルを結合したい場合はthに、データセルを結合したい場合はtdに指定します。
border属性は、テーブルの枠線を表示するために使っています。ここではHTMLだけでセルの位置を確認するために使っていますが、実際のWeb制作で枠線や余白を細かく整える場合はCSSを使います。CSSについては、CSSに関する記事以降で解説します。
セル結合を書く前に表の設計を考える
セル結合を使う表では、いきなりHTMLを書き始めるよりも、先に表の形を考えておくと失敗しにくくなります。
紙やメモに、完成形の表を簡単に描いてみるのもおすすめです。どのセルを横に結合するのか、どのセルを縦に結合するのかを先に決めておくと、HTMLの構造が整理しやすくなります。
| 事前に考えること | 確認内容 |
|---|---|
| 基本の列数 | 表全体を何列で作るか |
| 見出しの位置 | 大きな見出しをどこに置くか |
| 横方向の結合 | どのセルを何列分にするか |
| 縦方向の結合 | どのセルを何行分にするか |
| 省略するセル | rowspanの下で書かないセルはどこか |
セル結合は、使い方に慣れるまでは少し混乱しやすい部分です。特に、rowspanを使ったときに下の行のセルを省く考え方は、最初につまずきやすいポイントです。
しかし、表全体を格子として考え、どのセルがどの場所を使っているのかを確認しながら書けば、少しずつ理解できるようになります。
セル結合を使うときの確認ポイント
セル結合を使ったテーブルを作成したら、ブラウザで表示を確認し、行や列がずれていないかを見てみましょう。
| 確認項目 | 確認する内容 |
|---|---|
| tableの中にtrがあるか | 表全体と行の構造が正しいか |
| trの中にthやtdがあるか | セルが正しい位置にあるか |
| colspanの値 | 横方向に結合したい列数と合っているか |
| rowspanの値 | 縦方向に結合したい行数と合っているか |
| 各行の列幅合計 | 表全体の基本列数とそろっているか |
| rowspanの下の行 | 占有済みのセルを書いていないか |
| 見出しとデータ | thとtdの使い分けが自然か |
表が崩れている場合は、結合しているセルだけを見るのではなく、表全体の列数を確認することが大切です。
colspanを使っている行では、そのセルが何列分を使っているかを数えます。rowspanを使っている場合は、下の行でどの列がすでに使われているかを確認します。
セル結合を理解すると、予定表、講座スケジュール、料金表、帳票形式の一覧など、より実用的なテーブルを作りやすくなります。HTMLだけで構造をしっかりつかんだあと、CSSに関する記事以降で、枠線、余白、背景色、文字の位置などを整えていくと、さらに見やすいテーブルに仕上げられます。