前回学んだ表の構造化はとても勉強になりました！でも、実際のWebサイトで見る表って、もっと複雑なものもありますよね？
鋭い観察だね！そうなんだ。実際のWebサイトでは、見出しが複数列にまたがっていたり、合計欄があったりと、もっと複雑で実用的な表が使われることがあるんだ。今日はそんな応用テクニックを学んでいこう。
セルの結合とかも、表計算ソフトでよくやりますけど、HTMLでもできるんですか？
もちろん！HTMLではcolspanとrowspanという属性を使って、セルを結合できるんだよ。それに加えて、表のフッターや列のグループ化など、実用的なテクニックがたくさんあるんだ。
セルの結合（colspan・rowspan）
複数のセルを結合することで、より実用的で分かりやすい表を作ることができます。HTMLでは列の結合（colspan）と行の結合（rowspan）の2つの方法があります。
列を結合する（colspan）
複数の列にまたがる見出しを作りたい場合は、colspan属性を使います。
他のセルを省略
カテゴリー分け
colspan の仕組み
- 結合する列数を指定
colspan属性に結合したい列の数を書く。例えばcolspan="3"と書くと、3列分のセルが1つになる - セルの省略 セルを結合する時は、その行から結合した分のセル（
<td>や<th>）を取り除く。例えば、4列の表で1つのセルをcolspan="3"にしたら、その行のセルは合計2つになる - 見出しのグループ化
colspanは複数の列に共通する見出しを作る時にとても便利。情報がすっきり整理されて、表がぐっと見やすくなる - レイアウトの調整 表全体のレイアウトを整えて、情報を分かりやすく見せることができる
実際にcolspanを試してみよう
行を結合する（rowspan）
複数の行にまたがるセルを作りたい場合は、rowspan属性を使います。
セルを省略
縦方向の関連付け
rowspan の仕組み
- 結合する行数を指定
rowspan="2"と書くと、そのセルは2行分の高さになる - 次の行ではセルを省略 結合されたセルがある列では、次の行でそのセルを書かない。例えば
rowspan="2"の場合、次の行では該当する列のセルを1つ省略する - データの継続性 同じデータが複数の行にまたがって続く時に便利
- 視覚的な関連付け 縦に並んだデータが同じグループに属していることを分かりやすく見せる
実際にrowspanを試してみよう
複雑な結合の例
実際のWebサイトでよく見る、複雑な表を作ってみましょう。
表のフッター（tfoot）
表の合計や総計を表示するために、<tfoot>要素を使います。これにより、データ部分と合計部分を意味的に分離できます。
（合計・総計）
フッターを区別
特別なスタイル
tfoot の特徴
- 意味の分離 ヘッダー、データ、フッターをはっきりと分けて、表の作りを分かりやすくする
- スタイルの自由度 CSSで合計行だけに特別な見た目を付けられる。背景色を変えたり文字を太くしたりして、合計を目立たせることができる
- 自動で下に配置 HTMLでは
<tbody>の後に書くが、実際には自動で表の一番下に表示される - 読み上げソフトに優しい 目の不自由な人が使う読み上げソフトが、表の構造をきちんと理解して説明してくれる
- 印刷で便利 長い表が何ページにもわたる時、各ページの下に合計を表示してくれるブラウザもある
実際にtfootを試してみよう
上の例では <tfoot style="..."> のようにHTMLタグに直接スタイルを書いています。これをインラインスタイルと呼びます。
- 書き方 HTMLタグの
style属性に直接CSSを記述 - メリット その要素だけにスタイルを適用できる
- デメリット 同じスタイルを何度も書く必要がある
- 使い分け 簡単なスタイルや一時的なテスト用に便利
実際のWebサイトでは、CSSファイルを分けて管理することが多いですが、ここでは<tfoot>の効果を分かりやすく見せるためにインラインスタイルを使っています。
理解度チェッククイズ
それじゃあ、今日学んだ表の応用テクニックがちゃんと身についているか、クイズで確認してみましょう。
表の応用テクニック理解度チェック
<table>
<tbody>
<tr>
<th scope="row">月曜</th>
<td rowspan="2">数学</td>
<td>英語</td>
</tr>
<tr>
<th scope="row">火曜</th>
<td>理科</td>
</tr>
</tbody>
</table><table>
<thead>
<tr><th>商品</th><th>売上</th></tr>
</thead>
<tbody>
<tr><td>商品A</td><td>100万</td></tr>
<tr><td>商品B</td><td>80万</td></tr>
</tbody>
<!-- A: ここ -->
</table>
<!-- B: ここ --><table>
<thead>
<tr>
<th>時限</th>
<th colspan="2">科目</th>
<th>教室</th>
</tr>
</thead>
<tbody>
<tr>
<td>1限</td>
<td>数学</td>
<td>英語</td>
<td>理科</td>
<td>A教室</td>
</tr>
</tbody>
</table>まとめ
セルの結合や表のフッターなど、実用的なテクニックがたくさんありますね！
特にtfoot要素を使った表の構造化は、データを整理して見せるのにとても便利ですね。
その通り！表の応用テクニックを使えば、データをより分かりやすく、使いやすく表示できるんだ。ただし、複雑にすればいいというわけではなく、ユーザーの理解しやすさを第一に考えることが重要だよ。次は、第3章で学んだリストと表の知識を総まとめするクイズに挑戦してみよう。
- セルの結合
colspanで列結合、rowspanで行結合を効果的に使用 - 表のフッター
<tfoot>で合計や集計データを意味的に分離 - 複雑な表の作成 colspanとrowspanを組み合わせて実用的な表を構築
- 意味的な構造 thead、tbody、tfootで表の役割を明確に分離
- アクセシビリティ配慮 scope属性で見出しとデータの関係を明確化
- 実用性重視 ユーザーの理解を助ける構造を心がける
次回は「第3章のクイズと実践」で、リストと表の理解を深めるためのクイズに挑戦し、実用的なスキルを身につけましょう！