WEB制作

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

2017年4月17日

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

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

170417a

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%という設定ですが、任意で変更してください。

  • この記事を書いた人

おるまーで

WEB屋

-WEB制作
-

Copyright© おるまーで , 2020 All Rights Reserved.