【記事テンプレート】さまざまな表組み

トフトフ

2019年8月 2日 11:00

記事テンプレート

イベント概要、価格表、店舗一覧などでよく使われる表組み（table）のパターンです。行列の幅や高さについては、中に入る文字列に合わせてwidthやheightで調整してください。

テーブルヘッダーが左のみにある場合

イベント名	○○勉強会
日時	7/1 19:00〜
会場	○○社ラウンジ

<table>
	<tbody>
		<tr>
			<th width="30%">イベント名</th>
			<td width="70%">○○勉強会</td>
		</tr>
		<tr>
			<th>日時</th>
			<td>7/1 19:00〜</td>
		</tr>
		<tr>
			<th>会場</th>
			<td>○○社ラウンジ</td>
		</tr>
	</tbody>
</table>

テーブルヘッダーが上のみにある場合

店名	住所	電話番号
○○店	〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX	XX-XXXX-XXXX
△△店	〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX	XX-XXXX-XXXX
□□店	〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX	XX-XXXX-XXXX

<table>
	<tbody>
		<tr>
			<th width="20%">店名</th>
			<th width="50%">住所</th>
			<th width="30%">電話番号</th>
		</tr>
		<tr>
			<td>○○店</td>
			<td>〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX</td>
			<td>XX-XXXX-XXXX</td>
		</tr>
		<tr>
			<td>△△店</td>
			<td>〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX</td>
			<td>XX-XXXX-XXXX</td>
		</tr>
		<tr>
			<td>□□店</td>
			<td>〒XXX-XXXX　東京都千代田区神田神保町X-XX-XX</td>
			<td>XX-XXXX-XXXX</td>
		</tr>
	</tbody>
</table>

テーブルヘッダーが左と上にある場合

プラン	カード数	容量	月額価格（税抜）
シルバー	1枚	10GB	1,000円
ゴールド	2枚	20GB	2,000円
プラチナ	3枚	30GB	3,000円

<table>
	<tbody>
		<tr>
			<th width="25%">プラン</th>
			<th width="25%">カード数</th>
			<th width="25%">容量</th>
			<th width="25%">月額価格（税抜）</th>
		</tr>
		<tr>
			<th>シルバー</th>
			<td>1枚</td>
			<td>10GB</td>
			<td>1,000円</td>
		</tr>
		<tr>
			<th>ゴールド</th>
			<td>2枚</td>
			<td>20GB</td>
			<td>2,000円</td>
		</tr>
		<tr>
			<th>プラチナ</th>
			<td>3枚</td>
			<td>30GB</td>
			<td>3,000円</td>
		</tr>
	</tbody>
</table>