パターン別 比較表のサンプル
パターン1. スタンダードな比較表
VIERA TH-49GX850 | VIERA TH-49GX750 | VIERA TH-49GX500 |
---|---|---|
メーカー | ||
パナソニック | パナソニック | パナソニック |
サイズ | ||
49インチ | 49インチ | 49インチ |
満足度 | ||
価格 | ||
¥132,800 | ¥107,800 | ¥86,634 |
1インチあたり | ||
¥2,710 | ¥2,200 | ¥1,768 |
公式サイト | 公式サイト | 公式サイト |
パターン2. 1列目を見出し列にした比較表
製品名 | VIERA TH-49GX850 | VIERA TH-49GX750 | VIERA TH-49GX500 |
メーカー | パナソニック | パナソニック | パナソニック |
サイズ | 49インチ | 49インチ | 49インチ |
満足度 | |||
価格 |
¥132,800 |
¥107,800 |
¥86,634 |
1インチあたり |
¥2,710 |
¥2,200 |
¥1,768 |
この比較表の作り方
ブロックの設定
コード
<table>
<thead>
<tr>
<th></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>製品名</strong></td>
<td><strong>VIERA TH-49GX850</strong></td>
<td><strong>VIERA TH-49GX750</strong></td>
<td><strong>VIERA TH-49GX500</strong></td>
</tr>
<tr>
<td><strong>メーカー</strong></td>
<td>パナソニック</td>
<td>パナソニック</td>
<td>パナソニック</td>
</tr>
<tr>
<td><strong>サイズ</strong></td>
<td>49インチ</td>
<td>49インチ</td>
<td>49インチ</td>
</tr>
<tr>
<td><strong>満足度</strong></td>
<td>[ほし5]</td>
<td>[ほし4]</td>
<td>[ほし3.5]</td>
</tr>
<tr>
<td><strong>価格</strong></td>
<td>[さんかく]
<span class="bold red">¥132,800</span></td>
<td>[まる]
<span class="bold red">¥107,800</span></td>
<td>[にじゅうまる]
<span class="bold red">¥86,634</span></td>
</tr>
<tr>
<td><strong>1インチあたり</strong></td>
<td>[さんかく]
¥2,710</td>
<td>[まる]
¥2,200</td>
<td>[にじゅうまる]
¥1,768</td>
</tr>
</tbody>
</table>
パターン3. 簡易的な並び替え&絞り込み検索ができる比較表
製品名 | メーカー | サイズ | 満足度 | 価格 | 1インチあたり |
---|---|---|---|---|---|
VIERA TH-49GX850 | パナソニック | 49インチ |
¥132,800 |
¥2,710 | |
VIERA TH-49GX750 | パナソニック | 49インチ |
¥107,800 |
¥2,200 | |
VIERA TH-49GX500 | パナソニック | 49インチ |
¥86,634 |
¥1,768 |
この比較表の作り方
- テーブルの作成手順はパターン2とほぼ同じですのでパターン2の解説動画を参考にしてください。
- ブロックの設定内容は以下の画像を参考にしてください。
$(function () {
var datatable = new DataTable(document.querySelector('#BBB table'), {
sort: [true, true, true, true, true, true],
filters: ['select', 'select', 'select', 'select', 'select', 'select']
});
});
<table>
<thead>
<tr>
<th>製品名</th>
<th>メーカー</th>
<th>サイズ</th>
<th>満足度</th>
<th>価格</th>
<th>1インチあたり</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>VIERA TH-49GX850</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし5]</td>
<td>[さんかく]
¥132,800</td>
<td>¥2,710</td>
</tr>
<tr>
<td><strong>VIERA TH-49GX750</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし4.5]</td>
<td>[まる]
¥107,800</td>
<td>¥2,200</td>
</tr>
<tr>
<td><strong>VIERA TH-49GX500</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし3.5]</td>
<td>[にじゅうまる]
¥86,634</td>
<td>¥1,768</td>
</tr>
</tbody>
</table>