問題
28テーブルのカラムを結合させよう
初級弐拾四で行ったテーブルの作成問題、第2弾です。 テーブルのカラム(列)やレコード(行)の結合ができるようになれば、ユーザーにとって分かりやすいテーブルを作ることができます。 操作方法自体は非常にシンプルなのでこの際に覚えていきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「テーブルのカラムを結合させよう」
テーブルタグを使用してカラムを結合させましょう!
見本画像を参考にして実装してください。
※Chromeのバージョンが上がり、うまく機能しない場合があります。
お使いのリセットCSSを削除してから実装してみてください。
期待する画面
解答と解説（テーブルのカラムを結合させよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
横に結合したい時は、colspanを付与し、
縦に付与したい時はrowspanを付与しましょう。
補足
テーブルはカラム(列)やレコード(行)を結合させたり、色分けをすることで分かり易い表に仕上がります。
作成する際に使用するタグについて簡単に復習しておきましょう。
タグ一覧
・tableタグ:このタグがないとテーブルは作成できない。th,tr,tdタグと組み合わせることでテーブルの作成ができる。
・thタグ:「table header」の略でテーブルの見出しやタイトルとなる部分を作成するタグのこと。
・trタグ:「table row」の略でテーブルの行部分(横方向)を指定するタグのこと。
・tdタグ:「table data」の略でテーブルセルの内容を指定するタグのこと。
属性一覧
・align:属性値にはcenter(中央寄せ)、left(左寄せ)、right(右寄せ)などが使用できる。
・border:テーブルタグに指定して使う。指定しなければ枠線なし、「border="1"」とすれば2本線の枠線が作れる。
(もし1本線にしたい場合はCSSでtableに対し「border-collapse:collapse;」を指定)
・width,height:縦幅や横幅も指定できる
