テーブルの応用(colspan・rowspan)

このレッスンでは、テーブルのcolspanとrowspanを使ったセルの結合方法を学び、複雑な表レイアウトを作れるようになることを目標にします。「HTML table colspan rowspan」で調べている方向けです。

colspan属性はセルを横方向に、rowspan属性はセルを縦方向に結合できます。「時間割の隣り合うコマをまとめる」ようなイメージです。数値を指定するとその数だけセルを結合できます。

サンプルコードでは、colspan="2"で「午前」という見出しを2マス分の幅に、rowspan="2"で「自由時間」というセルを2行分の高さに結合しています。結合した分だけ、他の行のセル数を減らす必要がある点にも注目してみましょう。

初心者がよくつまずくのが、colspanやrowspanでセルを結合した行では、その分だけ通常のセルの数を調整しないと、表全体の列がずれてしまう点です。結合したセルの数を頭の中で計算しながら、各行のセル数を揃える必要があります。

複雑な表計算ソフトのようなレイアウトも、この2つの属性を使いこなせばHTMLだけで表現でき、料金表や時間割など実務でも役立つ場面が多いです。表の構造を正しく理解しておくことで、複雑なデータも整理して表示できます。