この記事では、HTMLとCSSだけで色々な用途で使用可能な表（table）のおしゃれなコーティングデザインをいくつか紹介します。ブログやHPで一覧表や料金表などをまとめる時にでも使って下さい。
HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。
使い方
- HTMLをbodyの好きな箇所にコピペ
- CSSをスタイルシートにコピペ
注意点
一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass=”この部分“を任意のものにすれば解決します。
基本的な表の記述の仕方は以下の記事から
基本的な表
まずは基本的な表（table）の記述の仕方です。
下記が基本的な表（table）の書き方とデザインです。以下省略。
| 表 | 表 | 表 |
| 表 | 表 | 表 |
下記のHTMLをbody内に、CSSをスタイルシートにコピペして下さい。以下省略
<figure class="wp-block-table">
<table class="">
<tbody>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
</tbody>
</table>
</figure>下記が基本的な表（table）のストライプバージョンです。
| 表 | 表 | 表 |
| 表 | 表 | 表 |
| 表 | 表 | 表 |
下記のHTML（CSS付き）をコピペして下さい。もしくはブロック選択の「表」選択以下省略。
<figure class="wp-block-table is-style-stripes">
<table class="">
<tbody>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
</tbody>
</table>
</figure>背景色を付ける
テーブル全体に背景色を付けます。
| 表 | 表 | 表 |
| 表 | 表 | 表 |
<figure class="wp-block-table">
<table style="background-color:#faf0e6;"> <!--ここで背景色を指定-->
<tbody>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
</tbody>
</table>
</figure>背景色を分けて強調する
右側の行のみ色を変更。列行の説明などでよく使います。
| 1 | 2 | |
| A | ○ | × |
| B | ○ | × |
<figure class="wp-block-table">
<table>
<tbody style="background-color:#faf0e6;"> <!--ここで全体の背景-->
<tr>
<td style="background-color:#ffe4e1;"></td> <!--ここで左側の行の背景色変更と強調-->
<td style="background-color:#ffe4e1;"><strong>1</strong></td> <!--ここで上側の行の背景色変更と強調-->
<td style="background-color:#ffe4e1;"><strong>2</strong></td> <!--ここで上側の行の背景色変更と強調-->
</tr>
<tr>
<td style="background-color:#ffe4e1;"><strong>A</strong></td> <!--ここで左側の行の背景色変更と強調-->
<td>○</td>
<td>×</td>
</tr>
<tr>
<td style="background-color:#ffe4e1;"><strong>B</strong></td> <!--ここで左側の行の背景色変更と強調-->
<td>○</td>
<td>×</td>
</tr>
</tbody>
</table>
</figure>ブロック風
立体的なブロック風なデザインです。
| 表 | 表 | 表 | 表 |
| 表 | 表 | 表 | 表 |
| 表 | 表 | 表 | 表 |
| 表 | 表 | 表 | 表 |
HTML
<figure class="wp-block-table">
<table class="tb001">
<tbody>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
<tr>
<td>表</td>
<td>表</td>
<td>表</td>
<td>表</td>
</tr>
</tbody>
</table>
</figure>CSS
.tb001{
border-collapse:separate;
border-spacing: 5px; /*ブロックぽく*/
width: 100%;
}
.tb001 th,.tb001 td{
border-radius: 5px;
text-align: center;
padding: 10px 0;
box-shadow: 1px 1px 3px;
}
.tb001 th{
background-color: #ffaa55;
color: white;
border:solid 1px #927141;
}
.tb001 td{
background-color: #ffaa55;
border:solid 1px #af9d85;
}
コーポレートサイト風
| 表 | 表 | 表 | 表 |
|---|---|---|---|
| 表 | 表 | 表 | 表 |
| 表 | 表 | 表 | 表 |
| 表 | 表 | 表 | 表 |
HTML
<figure class="wp-block-table">
<table class="tb002">
<thead class="tb003">
<tr>
<th>表</th>
<th><strong>表</strong></th>
<th><strong>表</strong></th>
<th><strong>表</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
</tr>
<tr>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
</tr>
<tr>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
<td><strong>表</strong></td>
</tr>
</tbody>
</table>
</figure>CSS
.tb002{
width: 100%;
border-collapse:separate;
border-spacing: 0;
}
.tb003 th:first-child{
border-radius: 5px 0 0 0;
}
.tb002 th:last-child{
border-radius: 0 5px 0 0;
border-right: 1px solid #3c6690;
}
.tb002 th{
text-align: center;
color:white;
background: linear-gradient(#ffbf80,#ff952b); /*グラデーション*/
border-left: 1px solid #3c6690;
border-top: 1px solid #3c6690;
border-bottom: 1px solid #3c6690;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
width: 25%;
padding: 10px 0;
}
.tb002 td{
text-align: center;
border-left: 1px solid #a8b7c5;
border-bottom: 1px solid #a8b7c5;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
width: 25%;
padding: 10px 0;
}
.tb002 td:last-child{
border-right: 1px solid #a8b7c5;
}
.tb002 tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
.tb002 tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}マウスホバー
マウスを乗っけると色が変わります。
| 表 | 表 | 表 |
| 表 | 表 | 表 |
HTML
<figure class="wp-block-table">
<table class="tb004">
<tbody>
<tr>
<td class="ttb1">表</td>
<td class="ttb2">表</td>
<td class="ttb3">表</td>
</tr>
<tr>
<td class="ttb4">表</td>
<td class="ttb5">表</td>
<td class="ttb6">表</td>
</tr>
</tbody>
</table>
</figure>CSS
.tb004{
background-color:#000;
}
.ttb1{
color:#fff
}
.ttb1:hover { /*マウスホバー時*/
color:#000;
background-color:#ffaa55;
border: 1px solid #ffaa55;
}
.ttb2{
color:#fff
}
.ttb2:hover {
color:#000;
background-color:#ff5555;
border: 1px solid #ff5555;
}
.ttb3{
color:#fff
}
.ttb3:hover {
color:#000;
background-color:#6ad500;
border: 1px solid #6ad500;
}
.ttb4{
color:#fff
}
.ttb4:hover {
color:#000;
background-color:#00aaaa;
border: 1px solid #00aaaa;
}
.ttb5{
color:#fff
}
.ttb5:hover {
color:#000;
background-color:#ffff2b;
border: 1px solid #ffff2b;
}
.ttb6{
color:#fff
}
.ttb6:hover {
color:#000;
background-color:#9572b8;
border: 1px solid #9572b8;
}以上が「【コピペ可】ワードプレスの表(テーブル)デザイン5選！！」でした。
今後も様々なデザインを追加していく予定です。是非参考にしてみて下さい。
デザイン見本まとめ
他のデザイン見本もいくつか用意しています。合わせてどうぞ。
