表

賢威7のWordPress版に用意されているCSSのスタイルを適用してテーブル(表組み)を装飾する方法を紹介します。賢威7の標準機能の説明です。

用途ごとに複数のCSSスタイルが用意されています。必要に応じて活用しましょう。

テーブルを利用する際は、下記のサンプルコードをコピー&ペーストして利用してください。
表示例のサンプルコードを用意していますので参考にしてください。


標準

標準のテーブル

テーブルヘッダを指定した場合の標準のテーブルです。テーブルヘッダの部分は選択したテンプレートのカラーが適用されます。

標準のテーブル
<table>
<thead>
<tr>
<th></th>
<th>ヘッダ項目</th>
<th>ヘッダ項目</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名1</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

比較用テーブル

商品情報の比較などに利用できる比較用テーブルの例です。

比較用テーブル
<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">商品A</th>
<th class="w25 highlight"><span class="f12em">当社商品</span></th>
<th class="w25">商品B</th>
</tr>
</thead>
<tfoot>
<tr>
<th>フッター項目名</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名1</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

シンプル

シンプルなテーブル縦

下記テーブルは横幅を「30%、70%」で指定した例です。

項目名1 項目内容
項目名2 項目内容
項目名3 項目内容
項目名4 項目内容
<table>
<tr>
<th class="w30">項目名1</th>
<td class="w70">項目内容</td>
</tr>
<tr>
<th>項目名2</th>
<td>項目内容</td>
</tr>
<tr>
<th>項目名3</th>
<td>項目内容</td>
</tr>
<tr>
<th>項目名4</th>
<td>項目内容</td>
</tr>
</table>

シンプルなテーブル横

下記テーブルは横幅を「20%、40%、40%」で指定した例です。

項目名1 項目名2 項目名3
項目内容 項目内容 項目内容
項目内容 項目内容 項目内容
項目内容 項目内容 項目内容
<table>
<tr>
<th class="w20">項目名1</th>
<th class="w40">項目名2</th>
<th class="w40">項目名3</th>
</tr>
<tr>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<td>項目内容</td>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</table>

テーブルの調整

テーブルの横幅

CSSを指定してテーブルの横幅を比率で指定できます。

w05 横幅05%
w10 横幅10%
w15 横幅15%
w20 横幅20%
w25 横幅25%
w30 横幅30%
w35 横幅35%
w40 横幅40%
w45 横幅45%
w50 横幅50%
w55 横幅55%
w60 横幅60%
w65 横幅65%
w70 横幅70%
w75 横幅75%
w80 横幅80%
w85 横幅85%
w90 横幅90%
w95 横幅95%
w100 横幅100%

テーブルの縦の表示位置

CSSを指定してテーブルの縦の表示位置を指定できます。

vl-t 縦方向の上寄せ
vl-c 縦方向の中央寄せ
vl-b 縦方向の下寄せ

CSSの指定例

下記はテーブルの横幅や縦の表示位置を指定した例です。

上寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
中央寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
下寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
<table>
<tr>
<th class="w20 vl-t">上寄せ</th>
<td class="w80">これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
<tr>
<th class="vl-c">中央寄せ</th>
<td>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
<tr>
<th class="vl-b">下寄せ</th>
<td>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
</table>

以上