【記事テンプレート】さまざまな表組み
イベント概要、価格表、店舗一覧などでよく使われる表組み(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>