ブログで使えるおしゃれな表のテンプレートってある？
急いでるからコピペして、１０秒ですぐに使いたい
こんな疑問に答えます。
僕はWordPressのブログでは月２万PV、自作のiPhoneアプリを２つリリースしています。
そんな僕が解説していきます。
作業環境
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」です。
というわけで今回は以上です。
外枠が目立つパターン、内側にも線があるパターンを載せました。
ぜひコピペして、ご自身のサイトのパーツとして個人で使ってみてください。