WordPressやWixで使える！テーブルのテンプレ【コピペするだけ】

こんにちは、アカリです。

最近、WordPressやWixでサイトを作るとき、リクルートページで、

テーブルを組むことが多いので、

テンプレを貼っておきます。

レスポンシブでも綺麗に見えるので、コピペしてどんどん使ってください。

スポンサードサーチ

Tableのテンプレ

<table>
 <tr>
   <th>テキスト</th>
   <td>テキスト</td>
 </tr>
   <tr>
   <th>テキスト</th>
   <td>テキスト</td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
     テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>テキスト</td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
     テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
     テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
    テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
    テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
     テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
    テキスト
   </td>
 </tr>
 <tr>
   <th>テキスト</th>
   <td>
    テキスト
   </td>
 </tr>
</table>
<style>
table{
 font-family: 'TsukuARdGothic-Regular',YuGothic,'Yu Gothic',sans-serif;
 font-size: 16px;
 color: #555;
 border: 1px #79a8a9 solid;
 border-collapse: collapse;
 width: 100%;
height: auto;
}
th{
 border: 1px #9FE2D6 solid;
 background-color:rgba(237,247,247,0.5);
 padding:10px;
 width: 30%;
}
td{
 border: 1px #9FE2D6 solid;
 background-color:rgba(255,255,255,0.6);;
 padding: 10px;
 width:70%;
}
@media screen and (max-width:520px) {
table{font-size: 14px;}
}
</style>

出来上がりはこんな感じです。

可愛いテーブルができました。