DEMO

HTML

		<div class="table">
	<table>
		<tr class="tabletitle">
			<td>項目</td>
			<td class="Ourshop">項目</td>
			<td>項目</td>
		</tr>
		<tr>
			<td class="bold">タイトル1</td>
			<td class="Ourshop">内容が入ります。内容が入ります。</td>
			<td>内容が入ります。</td>
		</tr>
		<tr>
			<td class="bold">タイトル2</td>
			<td class="Ourshop">内容が入ります。内容が入ります。</td>
			<td>内容が入ります。</td>
		</tr>
		<tr>
			<td class="bold">タイトル3</td>
			<td class="Ourshop">内容が入ります。内容が入ります。</td>
			<td>内容が入ります。</td>
		</tr>
		<tr>
			<td class="bold">タイトル4</td>
			<td class="Ourshop">内容が入ります。内容が入ります。</td>
			<td>内容が入ります。</td>
		</tr>
		<tr>
			<td class="bold">タイトル5</td>
			<td class="Ourshop">内容が入ります。内容が入ります。</td>
			<td>内容が入ります。</td>
		</tr>
	</table>
</div>

		

HTML説明

画像の設定方法
<td>～</td>の中のテキストを書き換えてください。
前後の「<>」を消さないようにご注意ください。

行の増減方法
<tr>～</tr>までの範囲を増減させてください。

CSS

		<style>
	.table{
		max-width: 580px;
		margin: 0 auto;
		text-align: center;
	}
	.table table{
		border-collapse:collapse;
		border-spacing: 0;
		width: 100%;
		background: #fffcf6;
	}
	.tabletitle{
		background: #565656;
		color: #FFF;
	}
	.tabletitle .Ourshop{
		background: #ff30a3;
		color: #FFF;
	}
	.table tr td{
		border: solid 1px #cdcdcd;
		padding: 0.6em;
		font-size: .9em;
	}
	.Ourshop{
		border: solid 2px #ff30a3!important;
		color: #85004a;
		font-weight: bold;
		background: #fff0f8;
		width: 45%;
	}
	.bold{
		font-weight: bold;
		width: 25%;
	}
</style>
		

CSS説明

色の設定方法
ピンクの枠の色変更は(27行目)の中の色コードを書き換えてください。
「当店」の背景色変更は(18行目)の中の色コードを書き換えてください。
「当店」の欄の文字色変更は(28行目)の中の色コードを書き換えてください。
全体の背景色変更は(11行目)の中の色コードを書き換えてください。

テーブルの幅の変更方法
タイトル部分の幅は(35行目)の％を変更してください。
「当店」の欄の幅は(31行目)の％を変更してください。