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

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

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

イベント名 ○○勉強会
日時 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>

関連記事

前の記事へ

【記事テンプレート】ボタンいろいろ

次の記事へ

【記事テンプレート】プログラムのソースコードを含む記事