問題
13テーブルの操作をしよう
この問題では、HTMLのtableタグを使ったテーブルレイアウトの調整方法と、CSSでデザインを整える方法を学びます。
tableの行・列の構造を理解しながら、実際にコードを書いて身につけていきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「テーブルの操作をしよう」
HTMLとCSSを組み合わせてテーブルのデザインを調整したい場面はよく出てきます。
見本画像を参考にしながら、実際にテーブルを操作してみましょう。
期待する画面
解答と解説（テーブルの操作をしよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
HTMLのtableタグとCSSを組み合わせたテーブルデザインでは、セル結合と装飾を同時に制御する必要があります。
rowspanとは、tableのセルを縦方向に結合するための属性です。
rowspan="2" と指定するとそのセルが縦2行分の高さを占めます。
結合した分だけ不要になったセルの <td> は削除しないとレイアウトが崩れるので注意しましょう。
CSSでは border-collapse: collapse でセル間の余白をなくし、tr.borderNon クラスで特定の行のボーダーを非表示にしています。
position: absolute と疑似要素 content を使って、セル内のテキストを指定した位置に配置しています。
position: absolute は親要素に対して相対的に位置を指定する方法です。
今回は calc() と組み合わせることで、セル内の中央にテキストを配置しています。
こうした細かい位置調整は実装でよく使うテクニックなので、動作を確認しながら理解を深めましょう。
補足
rowspanはRow Spanの略で、縦結合にはrowspan・横結合には colspanを使います。
「縦に広げる＝rowspan」と覚えると 混乱しにくくなります。
border-collapse は「セルとセルの間の余白をなくす」、 position: absolute は「要素を好きな場所に置く」ための CSSと覚えておくと、他の場面でも応用が効きます。
完全一致でなくても、見本に近い状態まで実装できれば十分です。
・rowspanの基礎：rowspanを使ってtableの行を結合しよう
・colspanの使い方：テーブルのカラムを結合させよう
・HTML入門講座：HTML入門講座
・CSS入門講座：CSS入門講座
ポイント
html tableのCSSデザイン調整とrowspanの使い方
tableのセル結合にはrowspan（縦）とcolspan（横）を使います。
CSSでは border-collapse でボーダーを整え、疑似要素と position: absolute を組み合わせることで柔軟なレイアウト調整が可能です。
「何のために使うか」を意識しながら コードを読むと理解が深まります。
完全一致でなくても、見本に近い状態まで実装できれば十分です。
