ちょっと立体に見えるテーブルの作り方。

テーブルってあんまり使わないですかね。
でも、表など、テーブル作るを作るとき、
ちょっといつもと違う雰囲気、可愛く(？)する方法。
なんとなく、立体に見えます。。
ちょっと立体に見えるテーブルの作り方。

=html=
<table>
	<tr>
		<th>test</th>
		<td>テスト</td>
		<td>テスト</td>
	</tr>
	<tr>
		<th>test</th>
		<td>テスト</td>
		<td>テスト</td>
	</tr>
	<tr>
		<th>test</th>
		<td>テスト</td>
		<td>テスト</td>
	</tr>
	<tr>
		<th>test</th>
		<td>テスト</td>
		<td>テスト</td>
	</tr>
	<tr>
		<th>test</th>
		<td>テスト</td>
		<td>テスト</td>
	</tr>
</table>

普通にテーブルを作る

=css=
table{
	font-size:18px;
	border-collapse:separate;
	border-spacing:0px;
	border-left:#4B4B4B 2px solid;
	border-top:#4B4B4B 2px solid;
}
table tr th{
	width:100px;
	background-color:#D0D0FF;
	padding:10px;
	border:#4B4B4B 2px solid;
	border-left:#fff 2px solid;
	border-top:#fff 2px solid;
}
table tr td{
	width:100px;
	background-color:#FFCEF4;
	padding:10px;
	border:#4B4B4B 2px solid;
	border-left:#fff 2px solid;
	border-top:#fff 2px solid;
}

border-collapse:separate;とborder-spacing:0px;がポイントです。
border-collapse:separate;で
隣接するセルのボーダーを間隔をあけて表示します。
感覚としては、th・tdをそれぞれバラバラにする感じです。

border-spacing:0px;で
border-spacingプロパティは、隣接するセルのボーダーとボーダーの間隔を0pxに指定します。

そして、left・topなど必要な部分に立体に見えるようborderを。
私が使う場合は、borderの太さは大体1pxか2pxにしています。

これで、おわり！

・・・どうですか？なんとなーく立体にみえますよね！ｗ

Similar Posts:

• WordPress2.7の導入(1) インストール
• WordPress2.7の導入(11) WP-DB-Backupの設定
• WordPress2.7の導入(7) テーマの設定
• WordPress2.7の導入(10) テーマのカスタマイズ
• WordPressで簡単にLightboxを導入できるプラグイン Lightbox 2.0 for WordPress