6日でできる 新HTML入門｜表の行・列のグループ化とセル結合
表をただ並べるだけで終わらせない。行・列を整理し、セルを結合して、複雑な情報も分かりやすく見せるHTMLテーブルを作ろう。
HTMLの表は、行と列を並べるだけの単純な仕組みに見えるかもしれません。しかし、tableタグには、表の構造をより分かりやすく整理するための便利なタグや属性が用意されています。たとえば、表の見出し部分、データ部分、合計部分を分けたり、列ごとにまとめて色を付けたり、複数のセルを横方向や縦方向に結合したりできます。
表に入れる情報が少ないうちは、tr、th、tdだけでも十分です。しかし、売上表、スケジュール表、販売実績表のように情報量が増えると、どこが見出しで、どこがデータで、どこが集計なのかを整理することが大切になります。そのときに役立つのが、thead、tbody、tfootです。これらを使うと、表の行を役割ごとに分けられます。
また、列単位で背景色や幅を変えたいときは、colgroupやcolを使えます。セルごとにclassを付けなくても、列全体に対してまとめて指定できるため、表の管理がしやすくなります。
さらに、colspanやrowspanを使うと、セルを横方向や縦方向に結合できます。会議予定のように複数の曜日にまたがる予定を表したり、販売実績のカテゴリを複数行にまとめたりするときに便利です。
ここでは、表の行グループ、列グループ、セル結合、CSSの優先順位を、具体的なサンプルHTMLを使いながら順番に確認していきます。
行のグループ化で表の役割を分ける
表の行は、すべて同じ役割を持っているわけではありません。多くの表では、上部に項目名を表す見出し行があり、その下に実際のデータ行が並び、最後に合計や平均などの集計行が置かれます。
このような構造をHTMLで分かりやすく表すために、thead、tbody、tfootを使います。
行グループで使うタグ
| タグ | 役割 |
|---|---|
| thead | 表の見出し行をまとめる |
| tbody | 表のデータ行をまとめる |
| tfoot | 表の集計行や合計行をまとめる |
theadには、列名や項目名を入れる行をまとめます。tbodyには、実際のデータを入れる行をまとめます。tfootには、合計や集計など、表の最後に置きたい行をまとめます。
行グループを使うと、HTMLの構造が読みやすくなるだけでなく、CSSも指定しやすくなります。たとえば、theadは濃い背景色、tbodyは淡い背景色、tfootは太字で強調、といった指定をまとめて行えます。
図1：thead、tbody、tfootで表の行を役割ごとに分ける
この図から分かること
thead、tbody、tfootを使うと、表の行を見出し部、データ部、集計部に分けられます。表の構造が分かりやすくなり、CSSで部分ごとに背景色や文字の太さを変えることも簡単になります。情報量が多い表ほど、行グループを使うメリットが大きくなります。
thead、tbody、tfootを使った売上表
次の例では、カフェの売上表を作ります。theadに見出し行、tbodyに日別の売上データ、tfootに合計行を入れています。
ファイル名： Lesson23-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>売上レポート</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
table {
border-collapse: collapse;
width: 70%;
margin: 24px auto;
}
caption {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
}
th,
td {
border: solid 1px #666666;
padding: 8px 12px;
text-align: right;
}
th {
text-align: center;
}
thead {
background-color: #263F73;
color: #FFFFFF;
}
tbody {
background-color: #EEF4FF;
}
tfoot {
background-color: #E0E0E0;
font-weight: bold;
}
</style>
</head>
<body>
<h1>4月のカフェ売上レポート</h1>
<table>
<caption>4月第1週の売上レポート</caption>
<thead>
<tr>
<th>曜日</th>
<th>ランチ売上</th>
<th>ディナー売上</th>
</tr>
</thead>
<tbody>
<tr>
<td>月</td>
<td>118,000円</td>
<td>196,000円</td>
</tr>
<tr>
<td>火</td>
<td>126,000円</td>
<td>204,000円</td>
</tr>
<tr>
<td>水</td>
<td>132,000円</td>
<td>188,000円</td>
</tr>
<tr>
<td>木</td>
<td>141,000円</td>
<td>216,000円</td>
</tr>
<tr>
<td>金</td>
<td>155,000円</td>
<td>238,000円</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>672,000円</td>
<td>1,042,000円</td>
</tr>
</tfoot>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、tableの中をcaption、thead、tbody、tfootに分けています。captionは表のタイトルです。theadには曜日、ランチ売上、ディナー売上という見出し行を入れています。tbodyには月曜日から金曜日までのデータ行を入れています。tfootには合計行を入れています。
CSSでは、thead、tbody、tfootそれぞれに背景色を指定しています。theadは濃い青と白文字にして、見出し行として目立たせています。tbodyは淡い青で、データ部分を読みやすくしています。tfootはグレーの背景色と太字で、合計行であることが分かるようにしています。
このように、行の役割ごとにタグを分けると、CSSをまとめて指定できます。表が大きくなっても、どこが見出しで、どこがデータで、どこが集計なのかが分かりやすくなります。
tbodyは複数使うこともできる
tbodyは、必要に応じて複数回使えます。たとえば、売上表を平日と休日に分けたい場合や、商品カテゴリごとにデータを分けたい場合です。
<tbody>
<tr>
<td>平日データ</td>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<td>休日データ</td>
<td>...</td>
</tr>
</tbody>このようにtbodyを分けると、データのまとまりごとにCSSを変えたり、あとから表を読み直すときに構造を理解しやすくなったりします。
tfootは、集計や合計の行をまとめるために使います。売上表、成績表、在庫表などでは、最後に合計や平均を入れることがよくあります。そのような行をtfootにまとめると、表の役割が明確になります。
列のグループ化で列単位にスタイルを指定する
表では、行だけでなく列にも意味があります。たとえば、売上表では、ランチ売上の列、ディナー売上の列のように、列ごとに内容が分かれています。列ごとに背景色を変えると、数字の比較がしやすくなります。
列をまとめて指定したいときは、colgroupやcolを使います。
列グループで使うタグ
| タグ | 役割 |
|---|---|
| colgroup | 列のグループを定義する |
| col | 個々の列を指定する |
colgroupは、tableタグの中で、theadやtbodyより前に書きます。列の数や列ごとのスタイルを指定するときに使います。
<table>
<colgroup span="1"></colgroup>
<colgroup span="1"></colgroup>
<colgroup span="1"></colgroup>
<thead>
...
</thead>
</table>span属性を使うと、そのcolgroupが何列分を対象にするかを指定できます。1列ずつ分けたい場合はspan="1"を指定します。複数列をまとめたい場合は、span="2"のように指定できます。
colgroupで列ごとに背景色を変える
次の例では、曜日、ランチ売上、ディナー売上の3列をcolgroupで分け、それぞれの列に背景色を指定しています。
ファイル名： Lesson23-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>売上レポートの列グループ</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
table {
border-collapse: collapse;
width: 70%;
margin: 24px auto;
}
caption {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
}
col.day-column {
background-color: #FFFFFF;
}
col.lunch-column {
background-color: #FFF8D8;
}
col.dinner-column {
background-color: #E8F8E8;
}
th,
td {
border: solid 1px #666666;
padding: 8px 12px;
text-align: right;
}
th {
background-color: #263F73;
color: #FFFFFF;
text-align: center;
}
</style>
</head>
<body>
<h1>4月のカフェ売上レポート</h1>
<table>
<caption>列ごとに色分けした売上レポート</caption>
<colgroup>
<col class="day-column">
<col class="lunch-column">
<col class="dinner-column">
</colgroup>
<thead>
<tr>
<th>曜日</th>
<th>ランチ売上</th>
<th>ディナー売上</th>
</tr>
</thead>
<tbody>
<tr>
<td>月</td>
<td>118,000円</td>
<td>196,000円</td>
</tr>
<tr>
<td>火</td>
<td>126,000円</td>
<td>204,000円</td>
</tr>
<tr>
<td>水</td>
<td>132,000円</td>
<td>188,000円</td>
</tr>
<tr>
<td>木</td>
<td>141,000円</td>
<td>216,000円</td>
</tr>
<tr>
<td>金</td>
<td>155,000円</td>
<td>238,000円</td>
</tr>
</tbody>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、colgroupの中に3つのcolタグを入れています。それぞれにday-column、lunch-column、dinner-columnというclassを付けています。
CSSでは、col.day-column、col.lunch-column、col.dinner-columnに背景色を指定しています。これにより、曜日列、ランチ売上列、ディナー売上列を列単位で色分けできます。
ただし、thには背景色を直接指定しています。そのため、見出し行ではcolの背景色ではなく、thに指定した濃い青の背景色が表示されます。これは、セルに直接指定したスタイルのほうが、列グループのスタイルより具体的で優先されるためです。
図2：colgroupとcolで列全体をまとめて指定する
この図から分かること
colgroupやcolを使うと、表の列全体に対してまとめてスタイルを指定できます。列ごとに背景色を変えると、同じ種類のデータを追いやすくなります。ただし、thやtdに直接指定したCSSがある場合は、セル側の指定が優先されることがあります。
colgroupとcolを使うときの注意点
colgroupやcolは列単位の指定に便利ですが、指定できるCSSには限りがあります。背景色や幅の指定には向いていますが、文字色や文字揃えなど、セルの中身に直接関わる指定は期待通りに効かない場合があります。
列全体に背景色を付けたい場合はcolが便利です。一方、文字の位置や太さを変えたい場合は、thやtdにclassを付けて指定するほうが確実です。
列グループで向いている指定
| 指定内容 | 向いている方法 |
|---|---|
| 列全体の背景色 | colやcolgroup |
| 列幅の調整 | colやcolgroup |
| 文字の右揃え | thやtdに指定 |
| 文字色の変更 | thやtdに指定 |
| 特定セルだけの強調 | thやtdにclassを付ける |
colgroupは、表の列構造を明確にしたいときにも役立ちます。特に列数が多い表では、列の役割をHTML上でも整理しやすくなります。
colspanで横方向にセルを結合する
表では、複数の列にまたがる情報を表したいことがあります。たとえば、会議が月曜と火曜の2日間にまたがる場合や、複数の列をまとめた見出しを作りたい場合です。
このようなときは、colspan属性を使います。colspanは、セルを横方向に何列分結合するかを指定する属性です。
<td colspan="2">プロジェクト会議</td>
この指定では、tdセルが横方向に2列分広がります。colspanを使ったセルは、指定した列数分のスペースを使うため、その行で必要なセル数の合計に注意しましょう。
colspanの考え方
| 指定 | 意味 |
|---|---|
| colspan="2" | 横に2列分のセルを結合する |
| colspan="3" | 横に3列分のセルを結合する |
たとえば、4列の表で1つのセルにcolspan="2"を指定した場合、そのセルは2列分を使います。そのため、同じ行に残り2列分のセルを用意すると、合計で4列になります。
colspanを使った会議スケジュール
次の例では、時間帯と曜日を組み合わせた会議予定表を作ります。プロジェクト会議や全体ミーティングの予定を、複数の曜日にまたがるセルとして表現します。
ファイル名： Lesson23-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>週次会議予定</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
table {
border-collapse: collapse;
width: 90%;
margin: 24px auto;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
th,
td {
border: solid 1px #666666;
width: 130px;
padding: 8px;
text-align: center;
}
th {
background-color: #E3F2FD;
}
.project {
background-color: #FFE8C2;
}
.company {
background-color: #DFF5E5;
}
</style>
</head>
<body>
<h1>週次会議予定</h1>
<table>
<caption>今週の会議スケジュール</caption>
<tr>
<th>時間帯</th>
<th>月</th>
<th>火</th>
<th>水</th>
</tr>
<tr>
<td>10:00〜11:00</td>
<td colspan="2" class="project">プロジェクト企画会議</td>
<td>営業共有会</td>
</tr>
<tr>
<td>13:00〜14:00</td>
<td>技術相談</td>
<td colspan="2" class="company">全体ミーティング</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
この表は、時間帯、月、火、水の4列で構成されています。1行目のデータでは、プロジェクト企画会議のセルにcolspan="2"を指定しています。これにより、月曜日と火曜日の2列分を1つのセルで表現しています。
2行目では、全体ミーティングにcolspan="2"を指定し、火曜日と水曜日の2列分を結合しています。
セルを結合すると、スケジュール表のように時間や期間の広がりを表しやすくなります。ただし、結合した分だけ同じ行のセル数が減るため、表全体の列数が合うように注意が必要です。
rowspanで縦方向にセルを結合する
rowspanは、セルを縦方向に結合する属性です。複数行にまたがるカテゴリやグループ名を表示したいときに使います。
<td rowspan="2">ドリンク</td>この指定では、tdセルが縦方向に2行分広がります。たとえば、ドリンクカテゴリの中にコーヒーと紅茶がある場合、カテゴリ名を2行にまたがって表示できます。
rowspanの考え方
| 指定 | 意味 |
|---|---|
| rowspan="2" | 縦に2行分のセルを結合する |
| rowspan="3" | 縦に3行分のセルを結合する |
rowspanを使うと、同じカテゴリ名を何度も繰り返して書かずに済みます。表がすっきりし、グループの関係も分かりやすくなります。
図3：colspanとrowspanでセルを結合する
この図から分かること
colspanは横方向にセルを結合し、rowspanは縦方向にセルを結合します。スケジュールのように期間を表したい場合はcolspan、カテゴリのように複数行をまとめたい場合はrowspanが便利です。結合した分だけ、同じ行や列で必要なセル数が変わる点に注意します。
rowspanを使った販売実績表
次の例では、販売実績表を作ります。ドリンクカテゴリにコーヒーと紅茶の2商品があるため、カテゴリのセルをrowspanで2行分結合します。
ファイル名： Lesson23-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>販売実績表</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
table {
border-collapse: collapse;
width: 60%;
margin: 24px auto;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
th,
td {
border: solid 1px #666666;
padding: 8px 12px;
text-align: center;
}
th {
background-color: #E8F5E9;
}
td.category {
background-color: #FFF8D8;
font-weight: bold;
}
</style>
</head>
<body>
<h1>4月の販売実績</h1>
<table>
<caption>商品カテゴリ別の販売実績</caption>
<tr>
<th>カテゴリ</th>
<th>商品</th>
<th>販売数</th>
</tr>
<tr>
<td rowspan="2" class="category">ドリンク</td>
<td>コーヒー</td>
<td>150</td>
</tr>
<tr>
<td>紅茶</td>
<td>120</td>
</tr>
<tr>
<td class="category">フード</td>
<td>サンドイッチ</td>
<td>85</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、最初のデータ行にあるドリンクのセルにrowspan="2"を指定しています。そのため、ドリンクのセルはコーヒーの行と紅茶の行の2行分にまたがって表示されます。
次の行では、カテゴリ用のtdは書いていません。すでに上の行のドリンクセルが2行分を占めているためです。rowspanを使うときは、このように結合されたセルが次の行にも影響することを意識する必要があります。
フードカテゴリは1商品だけなので、rowspanは使わずに通常のtdとして表示しています。
rowspanを使うと、同じカテゴリ名を繰り返し書かなくて済みます。カテゴリと商品との関係が見やすくなり、表全体もすっきりします。
CSS指定の優先順位を理解する
表では、thead、tbody、tfoot、colgroup、col、th、tdなど、複数の場所にCSSを指定できます。これらの指定が重なった場合、どのCSSが優先されるのかを理解しておくことが大切です。
一般的には、より具体的なセル要素に指定したCSSのほうが優先されます。
表のCSS優先順位の目安
| 適用対象 | 優先度の目安 |
|---|---|
| th、tdなどのセル要素 | 高い |
| thead、tbody、tfootなどの行グループ | 中くらい |
| colgroup、colなどの列グループ | 低い |
たとえば、theadにbackground-colorを指定し、さらにthにもbackground-colorを指定した場合は、thの指定が優先されます。thのほうが、実際に色が表示されるセルそのものに近い指定だからです。
thead {
background-color: gray;
}
th {
background-color: orange;
}この場合、見出しセルはgrayではなくorangeで表示されます。
列グループの指定は便利ですが、セルに直接指定したCSSがある場合は、そちらが優先されることがあります。そのため、列全体の背景色はcolで指定し、見出しセルや特定のセルはthやtdで上書きする、という使い方をすると整理しやすくなります。
グループ化とセル結合を使うときに意識したいこと
表の行グループ、列グループ、セル結合は、情報を分かりやすく整理するための機能です。複雑な表を作るときほど、どの部分が何を表しているのかをHTML上でも明確にしておくと、あとから修正しやすくなります。
thead、tbody、tfootは、表を見出し、データ、集計に分けるために使います。CSSで色分けもしやすくなるため、売上表や集計表に向いています。
colgroupやcolは、列単位で背景色や幅を指定したいときに便利です。セルごとにclassを付けなくても、列全体をまとめて扱えます。
colspanは横方向のセル結合、rowspanは縦方向のセル結合に使います。スケジュールやカテゴリ表のように、情報が複数の列や行にまたがる場合に役立ちます。ただし、セルを結合すると、行や列の数がずれて見えることがあるため、表全体の構造を確認しながら書くことが大切です。
使用タグと属性の整理
この学習で登場した主なタグと属性を整理します。
| タグ・属性 | 用途 |
|---|---|
| table | 表全体を作る |
| caption | 表のタイトルを付ける |
| thead | 表の見出し行をまとめる |
| tbody | 表のデータ行をまとめる |
| tfoot | 表の集計行をまとめる |
| colgroup | 列のグループを定義する |
| col | 個々の列を指定する |
| tr | 表の行を作る |
| th | 見出しセルを作る |
| td | 通常のデータセルを作る |
| colspan | セルを横方向に結合する |
| rowspan | セルを縦方向に結合する |
| class | CSSを適用するための名前を付ける |
tableは表全体を作る土台です。その中にcaption、colgroup、thead、tbody、tfootなどを配置して、表の構造を整理します。trで行を作り、その中にthやtdを入れてセルを作ります。
colspanやrowspanは、tdやthに指定する属性です。colspanは横方向、rowspanは縦方向の結合に使います。
CSSでは、thead、tbody、tfoot、col、th、tdなどに対してスタイルを指定できます。ただし、優先順位により、セル要素に直接指定したCSSが強く反映される場合があります。
表のグループ化とセル結合を使えるようになると、単純な一覧表だけでなく、売上レポート、スケジュール表、販売実績表、比較表など、実務でよく使う複雑な表も作りやすくなります。