コピペで使える!シンプルな表(テーブル)デザイン

Bitfan ガイド

2023/01/31 17:30

Follow

投稿・ページ内で使える、表のデザインサンプルをご紹介します。

 

コードをコピーしてソースモードで入力してお使いいただけます。

もちろん自分好みにカスタマイズして使って頂いても構いません。

 

 

 

01-シンプルな表のデザイン

公演日 会場 開場 開演
2022
12/1
(木)
埼玉スーパーアリーナ
(埼玉)
17:00 18:00
2022
12/24
(土)
Panasonic Stadium Suita
(大阪)
17:00 18:00
2022
12/25
(日)
TACHIKAWA STAGE GARDEN
(東京)
17:00 18:00

▼以下のグレーの中をコピーして使ってください

<table style="width: 100%; border-spacing: 0; border-collapse: collapse; text-align: center; line-height: 1.4; font-size: 0.85em; color: #000000;">
	<colgroup> 
		<!-- 縦列の幅を指定しています(左の列から順に記載) --> 
		<col style="width: 20%;" /> 
		<col style="width: 40%;" /> 
		<col style="width: 20%;" /> 
		<col style="width: 20%;" /> 
	</colgroup>
<thead><!-- 見出しここから -->
<tr style="background: #b8d200;">
<th style="padding: 8px 16px; border: 1px solid #000000;">公演日</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">会場</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">開場</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">開演</th>
</tr>
<!-- 見出しここまで --></thead>
<tbody><!-- 内容ここから -->
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000;">2022<br />12/1<br />(木)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">埼玉スーパーアリーナ<br />(埼玉)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
</tr>
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000; color: #1765c6;">2022<br />12/24<br />(土)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Panasonic Stadium Suita<br />(大阪)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
</tr>
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000; color: #e13e49;">2022<br />12/25<br />(日)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">TACHIKAWA STAGE GARDEN<br />(東京)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
</tr>
<!-- 内容ここまで --></tbody>
</table>

02-横スクロールさせる表のデザイン

公演日 エリア 会場 開場 開演 ゲスト 問い合わせ
2022
12/1
(木)
埼玉 埼玉スーパーアリーナ 17:00 18:00 Bitfan BAND Bitfan TOKYO:00-0000-0000
(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)
2022
12/24
(土)
大阪 Panasonic Stadium Suita 17:00 18:00 Bitファン太郎 Bitfan TOKYO:00-0000-0000
(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)
2022
12/25
(日)
愛知 バンテリンドームナゴヤ 17:00 18:00 THE Bitfan BOYS Bitfan TOKYO:00-0000-0000
(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)

▼以下のグレーの中をコピーして使ってください

<div style="overflow-x: scroll;white-space: nowrap;-webkit-overflow-scrolling: touch;">
<table style="display: block;border-spacing: 0; border-collapse: collapse; text-align: center; line-height: 1.4; font-size: 0.85em; color: #000000;">
<thead><!-- 見出しここから -->
<tr style="background: #b8d200;">
<th style="padding: 8px 16px; border: 1px solid #000000;">公演日</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">エリア</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">会場</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">開場</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">開演</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">ゲスト</th>
<th style="padding: 8px 16px; border: 1px solid #000000;">問い合わせ</th>
</tr>
<!-- 見出しここまで --></thead>
<tbody><!-- 内容ここから -->
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000;">2022<br />12/1<br />(木)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">埼玉</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">埼玉スーパーアリーナ</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Bitfan BAND</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Bitfan TOKYO:00-0000-0000<br>(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)</td>
</tr>
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000; color: #1765c6;">2022<br />12/24<br />(土)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">大阪</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Panasonic Stadium Suita</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Bitファン太郎</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Bitfan TOKYO:00-0000-0000<br>(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)</td>
</tr>
<tr>
<td style="padding: 24px 16px; border: 1px solid #000000; color: #e13e49;">2022<br />12/25<br />(日)</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">愛知</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">バンテリンドームナゴヤ</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">17:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">18:00</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">THE Bitfan BOYS</td>
<td style="padding: 24px 16px; border: 1px solid #000000;">Bitfan TOKYO:00-0000-0000<br>(平日12:00〜13:00/16:00〜19:00 ※日曜・祝日除く)</td>
</tr>
<!-- 内容ここまで --></tbody>
</table>
</div>

カスタマイズ方法

色を変える
#000000#B8D200など#〜で書かれた箇所が色の指定です。この部分をお好みのカラーコードに書き換えてください。
列を増やす
<tbody>〜</tbody>で囲まれた中にある<tr>〜</tr>が一列分です。列を増やしたい場合は、こちらをコピペして列を追加し、内容を書き換えてください。
行を増やす
まず<thead>〜</thead>で囲まれた中にある<th>〜</th>をコピペして表見出しを追加し内容書き換えます。
次に、<tbody>〜</tbody>の中にある各<tr>〜</tr>内に<td>〜</td>を追加すると行を増やせます。

ソースモード切り替え方法

 

Report the page

コピーしました

コピーしました