CSSでTableをデザインするサンプル 応用編

CSSでTableをデザインするサンプル 応用編

←の用に料金表など、一つのコラムを目立たせてるようなテーブルのデザインを海外のサイトなどではみかけた事があるので、これのデモページを作ってみました。

思ってたよりややこしいかったので解説付きで紹介したいと思います。

demo page

…ここからが続き

デモページの解説

Tableの共通部分の指定

table.charge		{
	width: 100%;
	margin-bottom: 30px;
	text-align: center;
	color: #666;
}

ここは普通です。(※borderは指定しない事)

thead要素(上部)

thead要素(上部)
table.charge th	{
	font-weight: bold;
	font-size: 133.3%;
	padding: 40px 5px 20px;
	text-align: center;
	border-bottom: 1px solid #CCC;
}

共通になる要素先に指定。

table.charge thead th	{
	background: url(../images/thead.gif) no-repeat top right;
}

左から3番4番のセルの画像を指定。画像表示

table.charge thead th.tit	{
	background: url(../images/thead_tit.gif) no-repeat;
}

左から1番のセルの画像を指定。画像表示

tbody要素(中部)

tbody要素(中部)
table.charge td	{
	background: url(../images/td.gif) no-repeat top right;
	padding: 10px;
	border-bottom: 1px solid #CCC;
}

左から3番4番のセルの画像を指定。画像表示

table.charge td.tit	{
	background: url(../images/td_tit.gif) no-repeat;
	text-align: left;
	padding: 10px 20px;
	font-size: 116.6%;
}

左から1番のセルの画像を指定。画像表示

tfoot要素(下部)

tfoot要素(下部)
table.charge tfoot td	{
	border-bottom: none;
	background: url(../images/tfoot.gif) no-repeat right bottom;
	padding-bottom: 40px;
}

左から3番4番のセルの画像を指定。画像表示

table.charge tfoot td.tit	{
	background: url(../images/tfoot_tit.gif) no-repeat bottom left;
}

左から1番のセルの画像を指定。画像表示

Sign up要素(ボタンがある部分)

Sign up要素(ボタンがある部分)
table.charge tr.sign td	{
	background: url(../images/sign.gif) no-repeat top right;
}

左から3番4番のセルの画像を指定。画像表示

table.charge tr.sign td.pick	{
	background: url(../images/sign_pick.gif) no-repeat;
}

Picking up部分の画像を指定。画像表示

table.charge tr.sign td.tit	{
	background: url(../images/sign_tit.gif) no-repeat;
}

左の画像を指定。画像表示

Picking up要素(黒い部分)

Picking up要素(黒い部分)
table.charge .pick	{
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

共通になる要素先に指定。

table.charge thead .pick	{
	width: 142px;
	background: url(../images/thead_pick.gif) no-repeat;
	color: #FFF;
}

thead部分の要素指定。画像表示

table.charge tbody td.pick	{
	width: 132px;
	background: #666;
	color: #FFF;
}

tbody部分の要素指定。

table.charge tfoot td.pick	{
	background: url(../images/tfoot_pick.gif) no-repeat bottom left;
}

tfoot部分の要素指定。画像表示

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article