CSSだけでちょっとだけ立体的に見えるテーブルのコード

CSSにちょっとだけ一手間いれるだけで画像をつかわずとも立体的というか、いわゆるベタっぽいテーブルから脱却できるCSSをご紹介します。コレ簡単でいいかもです。簡単な追加でちょっと上品に見えますよね。
背景色やthへの見出しはお好きにいじってください。

サンプル

コード

以下、htmlとcssです。

html

	

		

			
今一番行きたい国
			

				ドバイ
			
		
		

			
今一番欲しい物
			
Bluetooth接続のスピーカー
		
		

			
今食べたいもの
			
海鮮料理。海老とか貝類とか。考えたらお腹すいてきた…
		
	

css

table {
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-collapse: separate;
}
th, td {
	padding: 10px 12px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
}
th {
	background-color: #E2EFF3;
	vertical-align: top;
	width: 160px;
}

説明

borderの左と上に白い線を一本追加し、tableのborder-collapseをseparateにしているだけなんですけどね。

border-collapseって何

border-collapseとは隣のセルとのborderを重ねるかどうかというCSSプロパティです。デフォルトでは値がseparateとなっていて分かれているんですが、reset.cssではこれがcollapseで重なるように設定されています。なのでどのreset.cssを使っているかにもよるんですが、これをseparateに戻しています。
border-collapse?スタイルシートリファレンス

あとは特に難しいことはないです。
お楽しみを！