CSSだけで表の列を一括装飾するサンプル (CSS3版2)

CSSだけを使って、表(テーブル)の列(縦方向)を一括装飾しています。(CSS3のnth-child疑似クラスを使用)

都道府県名 読み 総人口(万人) 面積(km²) 人口密度(人/km²) 県庁所在地 地方 団体コード
東京都 とうきょうと 1,327 2,189 6,000 新宿区 関東 13000-1
神奈川県 かながわけん 908 2,415 3,760 横浜市 関東 14000-7
大阪府 おおさかふ 886 1,899 4,700 大阪市 近畿 27000-8
愛知県 あいちけん 743 5,165 1,400 名古屋市 中部、東海 23000-6
埼玉県 さいたまけん 722 3,798 1,900 さいたま市 関東 11000-1
千葉県 ちばけん 619 5,156 1,200 千葉市 関東 12000-6
北海道 ほっかいどう 544 83,457 65 札幌市 北海道 01000-6
福岡県 ふくおかけん 509 4,979 1,000 福岡市 九州 40000-9
兵庫県 ひょうごけん 556 8,396 662 神戸市 近畿 28000-3

※Selectivizrを使うことで、IE6~8でもnth-child疑似クラスを利用可能にしています。

記事に戻る