HTML5

table要素のカラム(列)グループの使い方

HTMLで表を作成するときに、列に対して色の設定をしたい、などというときに便利なのがcolgroupcolです。

これの使い方を知っていると、見やすい表が作れるようになって、表組みのバリエーションも増えるので、知っておくと便利です。

記述するときは<colgroup class="グループ名" span="列数"><col class="グループ名" span="列数"></colgroup>という感じで使います。

classにCSSを設定すれば、列ごとにセルの色を変えたり、太字にしたりといった設定が効率よく行えます。

具体的にどんな感じなのか、実例を使って表示して見ましょう。
tableのソースは以下のように各生徒のテストの点数の集計表を作ったとします。

CSSの設定せずに表示したらこんな感じになります。

テスト集計
氏名 英語 国語 数学 合計
相田 82 85 79 246
井上 65 53 75 193
宇梶 58 69 51 178
江藤 78 63 81 222

 

<col class="グループ名" span="3">の「グループ名」のところにスタイシートを設定するとこんな具合になります。

テスト集計
氏名 英語 国語 数学 合計
相田 82 85 79 246
井上 65 53 75 193
宇梶 58 69 51 178
江藤 78 63 81 222

スタイルシートは氏名の1列に背景をグレー、英国数の科目の点数の3列にまとめて黄色の背景、合計の1列に赤の背景を設定しています。

このようにcolgroupを使うと、縦の列に対して一括で設定ができるので、知っていると便利です。

Related posts

HTML5のリスト表示をおさらい

ItSpaceBiz

HTMLで略語と定義をマークアップする方法

ItSpaceBiz

よく使うHTMLの特殊文字(エンティティ)の一覧-CSSコードも有り

ItSpaceBiz