シンプルなテーブル表組みのソース。【会社概要におすすめ】

会社案内・会社概要ページでよく使うCSS装飾テーブルのご紹介です。

外観はこんな感じ。とてもシンプルだけど、左側の項目の背景がちょっと立体的になっていて好印象。

CSSはこちら。

table.commpanyprofile {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	font-size: 1.4rem;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.commpanyprofile th {
	width: 25%;
	padding: 10px;
	font-weight: 400;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #eee;
}
table.commpanyprofile td {
	width: 75%;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

HTMLのほうはこんな感じ。

	

		
社名
		
株式会社◯◯◯
	
	

		
本社所在地
		
〒◯◯◯ ◯◯◯◯◯◯
	
	

		
TEL
		
◯◯◯-◯◯◯-◯◯◯
	
	

		
FAX
		
◯◯◯-◯◯◯-◯◯◯
	
	

		
事業内容
		
◯◯◯◯◯◯

		◯◯◯◯◯◯

		
	

テーブル幅100%。左側が25%、右側が75%という設定ですが、任意で変更してください。