The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

WordPressのおしゃれな表Tableデザイン色パターン【HTMLコピペ】

投稿日:2018年9月3日 更新日:

ブログで使えるおしゃれな表のテンプレートってある?
急いでるからコピペして、10秒ですぐに使いたい
こんな疑問に答えていきます。
別ブログで月に2万PVを超える僕が解説していきます。

はじめに

今回は、WordPressのおしゃれな表Tableデザイン色パターンというテーマで書いてきます。

すぐ使える表のパターンを作ってみました。

ぜひコピペして、ご自身のサイトのパーツとして個人で使ってみてくださいね。

作業環境

AFFINGER5 2018.08ver

 

外側の枠線が目立つタイプ

1

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #417489; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #417489;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #417489;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #417489;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #417489;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

2

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #564289; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #564289;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #564289;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #564289;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #564289;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

3

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #6D4289; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #6D4289;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #6D4289;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #6D4289;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #6D4289;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

4

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #87427B; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #87427B;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #87427B;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #87427B;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #87427B;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

"
"5

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #88425A; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #88425A;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #88425A;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #88425A;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #88425A;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

6

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #874642; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #874642;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #874642;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #874642;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #874642;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

7

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #895442; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #895442;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #895442;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #895442;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #895442;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

8

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #876A42; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #876A42;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #876A42;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #876A42;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #876A42;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

9

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #877A43; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #877A43;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #877A43;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #877A43;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #877A43;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

10

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #888542; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #888542;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #888542;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #888542;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #888542;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

11

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #738843; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #738843;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #738843;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #738843;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #738843;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

12

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; width: 100%; border-color: #458843; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #458843;"><strong>名前</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="   height: 18px;"><span style="color: #458843;"><strong>メンバーカラー</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="   height: 18px;"><span style="color: #458843;"><strong>Birthday</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="   height: 18px;"><span style="color: #458843;"><strong>好きな食べ物</strong></span></td>
<td style="   height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

13サイバーな水色(太枠)(非レスポンシブ)

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; border-color: #5eb4c3; border-style: solid;" border="5">
<tbody>
<tr style="height: 18px;">
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>名前</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>メンバーカラー</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>Birthday</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>好きな食べ物</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

 

14サイバーな水色-2(非レスポンシブ)

名前 たろう メンバーカラー オレンジ
Birthday 1999/08/31 好きな食べ物 スイカ

+ クリックしてコードを表示

<div class="notab">
<table style="height: 36px; border-color: #5eb4c3; border-style: solid; border-width:2px ;">
<tbody>
<tr style="height: 18px;">
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>名前</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">たろう</span></td>
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>メンバーカラー</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">オレンジ</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>Birthday</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">1999/08/31</span></td>
<td style="width: 166px; height: 18px;"><span style="color: #5eb4c3;"><strong>好きな食べ物</strong></span></td>
<td style="width: 166px; height: 18px;"><span style="color: #545b63;">スイカ</span></td>
</tr>
</tbody>
</table>
</div>

 

 

外側の枠線が目立ち、内側にも線があるタイプ

"1

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #417489;">
<tbody style="height: 36px; border-color: #417489; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #417489; background-color: #E5FAEB; text-align: center;"><span style="color: #417489;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #417489;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #417489; background-color: #E5FAEB; text-align: center;"><span style="color: #417489;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #417489;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #417489; background-color: #E5FAEB; text-align: center;"><span style="color: #417489;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #417489;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #417489; background-color: #E5FAEB; text-align: center;"><span style="color: #417489;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #417489;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #417489; background-color: #E5FAEB; height: 18px; text-align: center;"><span style="color: #417489;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #417489; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #417489; height: 18px; background-color: #E5FAEB; text-align: center;"><span style="color: #417489;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #417489; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"2

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #564289;">
<tbody style="height: 36px; border-color: #564289; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #564289; background-color: #E5EDFA; text-align: center;"><span style="color: #564289;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #564289;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #564289; background-color: #E5EDFA; text-align: center;"><span style="color: #564289;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #564289;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #564289; background-color: #E5EDFA; text-align: center;"><span style="color: #564289;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #564289;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #564289; background-color: #E5EDFA; text-align: center;"><span style="color: #564289;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #564289;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #564289; background-color: #E5EDFA; height: 18px; text-align: center;"><span style="color: #564289;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #564289; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #564289; height: 18px; background-color: #E5EDFA; text-align: center;"><span style="color: #564289;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #564289; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"3

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #6D4289;">
<tbody style="height: 36px; border-color: #6D4289; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #6D4289; background-color: #E7E5FB; text-align: center;"><span style="color: #6D4289;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #6D4289;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #6D4289; background-color: #E7E5FB; text-align: center;"><span style="color: #6D4289;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #6D4289;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #6D4289; background-color: #E7E5FB; text-align: center;"><span style="color: #6D4289;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #6D4289;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #6D4289; background-color: #E7E5FB; text-align: center;"><span style="color: #6D4289;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #6D4289;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #6D4289; background-color: #E7E5FB; height: 18px; text-align: center;"><span style="color: #6D4289;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #6D4289; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #6D4289; height: 18px; background-color: #E7E5FB; text-align: center;"><span style="color: #6D4289;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #6D4289; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"4

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #87427B;">
<tbody style="height: 36px; border-color: #87427B; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #87427B; background-color: #EDE5FA; text-align: center;"><span style="color: #87427B;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #87427B;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #87427B; background-color: #EDE5FA; text-align: center;"><span style="color: #87427B;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #87427B;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #87427B; background-color: #EDE5FA; text-align: center;"><span style="color: #87427B;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #87427B;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #87427B; background-color: #EDE5FA; text-align: center;"><span style="color: #87427B;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #87427B;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #87427B; background-color: #EDE5FA; height: 18px; text-align: center;"><span style="color: #87427B;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #87427B; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #87427B; height: 18px; background-color: #EDE5FA; text-align: center;"><span style="color: #87427B;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #87427B; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"5

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #88425A;">
<tbody style="height: 36px; border-color: #88425A; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #88425A; background-color: #F4E5FA; text-align: center;"><span style="color: #88425A;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #88425A;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #88425A; background-color: #F4E5FA; text-align: center;"><span style="color: #88425A;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #88425A;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #88425A; background-color: #F4E5FA; text-align: center;"><span style="color: #88425A;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #88425A;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #88425A; background-color: #F4E5FA; text-align: center;"><span style="color: #88425A;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #88425A;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #88425A; background-color: #F4E5FA; height: 18px; text-align: center;"><span style="color: #88425A;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #88425A; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #88425A; height: 18px; background-color: #F4E5FA; text-align: center;"><span style="color: #88425A;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #88425A; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"6

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #874642;">
<tbody style="height: 36px; border-color: #874642; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #874642; background-color: #FAE5F6; text-align: center;"><span style="color: #874642;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #874642;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #874642; background-color: #FAE5F6; text-align: center;"><span style="color: #874642;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #874642;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #874642; background-color: #FAE5F6; text-align: center;"><span style="color: #874642;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #874642;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #874642; background-color: #FAE5F6; text-align: center;"><span style="color: #874642;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #874642;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #874642; background-color: #FAE5F6; height: 18px; text-align: center;"><span style="color: #874642;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #874642; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #874642; height: 18px; background-color: #FAE5F6; text-align: center;"><span style="color: #874642;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #874642; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"7

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #895442;">
<tbody style="height: 36px; border-color: #895442; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #895442; background-color: #FAE5EC; text-align: center;"><span style="color: #895442;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #895442;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #895442; background-color: #FAE5EC; text-align: center;"><span style="color: #895442;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #895442;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #895442; background-color: #FAE5EC; text-align: center;"><span style="color: #895442;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #895442;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #895442; background-color: #FAE5EC; text-align: center;"><span style="color: #895442;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #895442;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #895442; background-color: #FAE5EC; height: 18px; text-align: center;"><span style="color: #895442;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #895442; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #895442; height: 18px; background-color: #FAE5EC; text-align: center;"><span style="color: #895442;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #895442; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"8

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #876A42;">
<tbody style="height: 36px; border-color: #876A42; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #876A42; background-color: #FBE9E5; text-align: center;"><span style="color: #876A42;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #876A42;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #876A42; background-color: #FBE9E5; text-align: center;"><span style="color: #876A42;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #876A42;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #876A42; background-color: #FBE9E5; text-align: center;"><span style="color: #876A42;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #876A42;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #876A42; background-color: #FBE9E5; text-align: center;"><span style="color: #876A42;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #876A42;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #876A42; background-color: #FBE9E5; height: 18px; text-align: center;"><span style="color: #876A42;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #876A42; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #876A42; height: 18px; background-color: #FBE9E5; text-align: center;"><span style="color: #876A42;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #876A42; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"9

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #877A43;">
<tbody style="height: 36px; border-color: #877A43; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #877A43; background-color: #FAF0E6; text-align: center;"><span style="color: #877A43;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #877A43;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #877A43; background-color: #FAF0E6; text-align: center;"><span style="color: #877A43;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #877A43;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #877A43; background-color: #FAF0E6; text-align: center;"><span style="color: #877A43;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #877A43;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #877A43; background-color: #FAF0E6; text-align: center;"><span style="color: #877A43;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #877A43;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #877A43; background-color: #FAF0E6; height: 18px; text-align: center;"><span style="color: #877A43;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #877A43; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #877A43; height: 18px; background-color: #FAF0E6; text-align: center;"><span style="color: #877A43;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #877A43; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"10

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #888542;">
<tbody style="height: 36px; border-color: #888542; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #888542; background-color: #F9F3E5; text-align: center;"><span style="color: #888542;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #888542;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #888542; background-color: #F9F3E5; text-align: center;"><span style="color: #888542;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #888542;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #888542; background-color: #F9F3E5; text-align: center;"><span style="color: #888542;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #888542;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #888542; background-color: #F9F3E5; text-align: center;"><span style="color: #888542;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #888542;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #888542; background-color: #F9F3E5; height: 18px; text-align: center;"><span style="color: #888542;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #888542; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #888542; height: 18px; background-color: #F9F3E5; text-align: center;"><span style="color: #888542;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #888542; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"11

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #738843;">
<tbody style="height: 36px; border-color: #738843; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #738843; background-color: #F9F6E5; text-align: center;"><span style="color: #738843;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #738843;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #738843; background-color: #F9F6E5; text-align: center;"><span style="color: #738843;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #738843;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #738843; background-color: #F9F6E5; text-align: center;"><span style="color: #738843;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #738843;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #738843; background-color: #F9F6E5; text-align: center;"><span style="color: #738843;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #738843;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #738843; background-color: #F9F6E5; height: 18px; text-align: center;"><span style="color: #738843;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #738843; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #738843; height: 18px; background-color: #F9F6E5; text-align: center;"><span style="color: #738843;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #738843; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"
"12

好きなスポーツ ダイビング ニックネーム あっきー
得意な教科 音楽 出身地 大阪
好きな食べ物 たこ焼き 最近買ったもの 帽子

+ クリックしてコードを表示

<table style="height: 54px; width: 100%; border: 2px solid #458843;">
<tbody style="height: 36px; border-color: #458843; border-style: solid; border-width:2px ;">
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #458843; background-color: #F7FAE5; text-align: center;"><span style="color: #458843;"><strong>好きなスポーツ</strong></span></td>
<td style="  height: 18px; border-color: #458843;"><span style="color: #545b63;">ダイビング</span></td>
<td style="  height: 18px; border-color: #458843; background-color: #F7FAE5; text-align: center;"><span style="color: #458843;"><strong>ニックネーム</strong></span></td>
<td style="  height: 18px; border-color: #458843;"><span style="color: #545b63;">あっきー</span></td>
</tr>
<tr style="height: 18px;">
<td style="  height: 18px; border-color: #458843; background-color: #F7FAE5; text-align: center;"><span style="color: #458843;"><strong>得意な教科</strong></span></td>
<td style="  height: 18px; border-color: #458843;"><span style="color: #545b63;">音楽</span></td>
<td style="  height: 18px; border-color: #458843; background-color: #F7FAE5; text-align: center;"><span style="color: #458843;"><strong>出身地</strong></span></td>
<td style="  height: 18px; border-color: #458843;"><span style="color: #545b63;">大阪</span></td>
</tr>
<tr style="height: 18px;">
<td style="  border-color: #458843; background-color: #F7FAE5; height: 18px; text-align: center;"><span style="color: #458843;"><strong>好きな食べ物</strong></span></td>
<td style="  border-color: #458843; height: 18px;"><span style="color: #545b63;">たこ焼き</span></td>
<td style="  border-color: #458843; height: 18px; background-color: #F7FAE5; text-align: center;"><span style="color: #458843;"><strong>最近買ったもの</strong></span></td>
<td style="  border-color: #458843; height: 18px;"><span style="color: #545b63;">帽子</span></td>
</tr>
</tbody>
</table>

"

カスタマイズする時のポイント

もし、あなたが、上の表を自分なりにカスタマイズする際に、ポイントがあります。

表のデフォルトの一括の色設定に気をつける

表を一括で色設定している場合、そちらが優先されるようです。
ダッシュボード>カスタマイズで、表の色を設定している項目をチェックしましょう。

AFFINGERの表のデフォルトの枠線設定に気をつける

AFFINGERでは、style.cssのスタイルシートで枠をデフォルトで設定しているようです。
左側と下側の枠線だけが、太くなったりします。
その場合はstyle.cssを見直して、必要なら子テーマでカスタマイズしましょう。
(この記事ではしていません)

テーブル(table)・表の幅100%を解除したい
http://the-money.net/table-no100/

上手くいかないときは、テキストエディタで編集する

上手くいかない時は、テキストエディタの方を使いましょう。

ビジュアルエディタは表を生成するまでは便利です。
しかし、その後の、カスタマイズは、綺麗に反映されないことが多いです。
TinyMICEなどのプラグインを使ったっ場合も同様ですね。

具体的に言うと、枠線のコードなどが上手くカッコ内に入らなかったりします。
(なんででしょうね、原因不明)

Evernoteからコピペすると「"」が文字化けしやすいので注意

Evernoteからコピペすると、「"」の文字が変化してしまうことが多いです。
原因は不明です。
ご注意ください。

この記事で使用している色コード一覧

濃い色 薄い色
1 #417489 #E5FAEB
2 濃い青 #564289 #E5EDFA
3 グレープ #6D4289 #E7E5FB
4 すみれ #87427B #EDE5FA
5 ピンク #88425A #F4E5FA
6 #874642 #FAE5F6
7 オレンジ #895442 #FAE5EC
8 みかん #876A42 #FBE9E5
9 からし色 #877A43 #FAF0E6
10 メロンパン色 #888542 #F9F3E5
11 黄緑 #738843 #F9F6E5
12 芝生色 #458843 #F7FAE5
追加 サイバーな水色 #5eb4c3

文字色は「#545B63」です。

 

まとめ

今回は、WordPressのおしゃれな表Tableデザイン色パターン、というテーマで書いてきました。

外枠が目立つパターン、内側にも線があるパターンを載せました。
ぜひ使ってみてください。

Ad-336px-stinger8

Ad-336px-stinger8

-WordPress, デザインテンプレート

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.