テーブルをCSSでデザイン|Web制作の基本:StudyNet

HOME > CSS カスタマイズ > テーブルをCSSでデザイン

テーブルをCSSでデザイン

CSSを使って、テーブルタグを制御します。
テーブルは表組みを作成するときに役立つタグです。

以前はレイアウトの要素が高かったのですが、
CSSレイアウトになってから、現在では表やデータを示すものとして使われることが多くなっています。

表のデザイン(1)

CSSでボーダーを表示する。
実務で使えるスタイルです。

#main table.table_design1{

	width:500px;

	border:1px solid #333;

	border-collapse:collapse;

	background:#fff;

}

#main table.table_design1 tr{

	border:1px solid #333;

}

#main table.table_design1 tr th{

	border:1px solid #333;

	padding:2px 5px;

	text-align:center;

	background:#CCCCCC;

}

#main table.table_design1 tr td{

	border:1px solid #333;

	padding:2px 5px;

}

サイト名	URL
WEBサイト制作者に役立つ参考サイト	http://www.studynet.jp
Ajax入門\|Ajaxの基礎と応用	http://ajax.studynet.jp/
Web制作の基本:StudyNet	http://web.studynet.jp/
PHP 入門	http://php.studynet.jp/
IT 用語辞典	http://it.studynet.jp/

表のデザイン(2)

CSSで枠線の間隔を広げる方法です。

#main table.table_design2{

	width:500px;

	border:1px solid #333;

	background:#fff;

	border-spacing:3px;

}

#main table.table_design2 tr{

	border:1px solid #333;

}

#main table.table_design2 tr th{

	border:1px solid #333;

	padding:2px 5px;

	text-align:center;

	background:#CCCCCC;

}

#main table.table_design2 tr td{

	border:1px solid #333;

	padding:2px 5px;

}

サイト名	URL
WEBサイト制作者に役立つ参考サイト	http://www.studynet.jp
Ajax入門\|Ajaxの基礎と応用	http://ajax.studynet.jp/
Web制作の基本:StudyNet	http://web.studynet.jp/
PHP 入門	http://php.studynet.jp/
IT 用語辞典	http://it.studynet.jp/

表のデザイン(3)

テーブル背景に画像。
テーブルのデザインに、ちょっとしたポイントなどに使えます。

#main table.table_design3{

	width:500px;

	border:1px solid #333;

	background:#fff;

	border-spacing:3px;

}

#main table.table_design3 tr{

	border:1px solid #333;

}

#main table.table_design3 tr th{

	border:1px solid #333;

	padding:2px 5px;

	text-align:center;

	background:#CCCCCC;

}

#main table.table_design3 tr td{

	border:1px solid #333;

	padding:2px 5px;

}

サイト名	URL
WEBサイト制作者に役立つ参考サイト	http://www.studynet.jp
Ajax入門\|Ajaxの基礎と応用	http://ajax.studynet.jp/
Web制作の基本:StudyNet	http://web.studynet.jp/
PHP 入門	http://php.studynet.jp/
IT 用語辞典	http://it.studynet.jp/