コピペで使える！シンプルな表（テーブル）デザイン
投稿・ページ内で使える、表のデザインサンプルをご紹介します。
コードをコピーしてソースモードで入力してお使いいただけます。
もちろん自分好みにカスタマイズして使って頂いても構いません。
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>を追加すると行を増やせます。
次に、<tbody>〜</tbody>の中にある各<tr>〜</tr>内に<td>〜</td>を追加すると行を増やせます。
ソースモード切り替え方法
