テーブル作成プラグイン「TablePress」の使い方と装飾方法

「TablePress」はテーブルが簡単に作成できるプラグインです。

HTMLで自作してもいいのですが、
複雑なテーブルになってくるとタグがごちゃごちゃして
自分でも何が何だか分からなってきたり(-_-;)

というわけで「TablePress」の使い方と
おまけに装飾方法やセルの結合の仕方なんかを書いておきます。

テーブルのHTML

ちなみにテーブルを自作する時のHTML（超基本形）はこちら。

わざわざプラグインを使うほどでもないかなっていう場合は
私もこの形をベースにテーブルを作成していきます。

<table>
<tbody>

<tr>
<td>1列目の左</td>
<td>1列目の真ん中</td>
<td>1列目の右</td>
</tr>

<tr>
<td>2列目の左</td>
<td>2列目の真ん中</td>
<td>2列目の右</td>
</tr>

</tbody>
</table>

テーブルデモ

それでは今回は「TablePress」を活用して
こんなテーブルを作成していきます。

プラグインのインストールと設定

「TablePress」は管理画面から検索できます。
インストール後有効化してください。

有効化すると管理画面左側のメニューに「TablePress」が追加されます。

初期設定は特に必要ないんですが・・・

いきなりテーブルを作ってみるとこんな風になりました。
縦の線が表示されてないっていうね(´･_･`)

いいっちゃいいんですけど、縦の線もあった方が分かりやすいので
下記の場所にCSSを追記しました。

「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」
※上部のタブに「プラグインのオプション」があります

.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid #ccc;
}

テーブルの新規作成

「TablePress」にカーソルを合わせて
「新しいテーブルを追加」をクリックします。

続いて作成するテーブルの設定を行います。

「説明」は記入しなくても問題ありません。

行と列は私もよく分からなくなるんですが(笑)、

行：横に何分割するか
列：縦に何分割するか

と覚えていただけたらと思います。
列はサイトのレイアウトなどで言われる「カラム数」のことですね！

ここの項目はあとで変更できるので何となくこれくらいかなっていうイメージで。

では、「テーブルを追加」をクリックして中身を作成していきましょう。
デモテーブルはこんな感じで記入してみました。

ヘッダーが不要な場合はテーブル編集画面の
「テーブルのオプション」から設定を切り替えてください。

テーブルが完成したら保存し、
[table id=1 /]という形のショートコードを記事に記入すると
テーブルが反映されます。

セルの結合を行う場合

「TablePress」には訪問者が自由に
テーブルの並び替えを行える機能が備わっています。

※テーブル編集画面の「DataTables JavaScriptライブラリ設定」で詳細設定が可能。
　日本語なので分かりやすいと思います。

ですがセルの結合をした場合、この機能は使えなくなってしまいますので注意。

上記のデモテーブルでは「WordPressインストール機能」と
「メールアカウント」でセルの結合を行なっています。

行を結合する場合：1番左にだけ記入して右には「#colspan#」と入力
列を結合する場合：1番上にだけ記入して下には「#rowspan#」と入力

統一したセル内の文字を真ん中寄せに表示させる場合は
文字を以下のタグで囲んで入力します。

<div align="center">文字</div>

テーブルの装飾を行う場合

デモテーブルでは任意の場所に背景色を付けています。

これは下記の場所にCSSを追記します。

「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」
※上部のタブに「プラグインのオプション」があります

デモテーブルと合わせてご覧ください。

/* レンタルサーバー比較 */
.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-3 .column-4,
.tablepress-id-1 .row-4 .column-2,
.tablepress-id-1 .row-5 .column-2,
.tablepress-id-1 .row-5 .column-3,
.tablepress-id-1 .row-7 .column-2 {
	background-color: #ffe5e5 !important; /* 背景色の指定 */
}

.tablepress-id-○：○にテーブルIDを記入
.row-2 .column-4：左側から何番目のセルか、上から何番目のセルか

ヘッダーも1列目に含まれます。

背景色でなく文字色を変更したい場合は
代わりにこのような記述をします。

	color: #ff0000 !important; /* 文字色の指定 */

というわけで、両方設定する場合はこのようになります。

/* レンタルサーバー比較 */
.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-3 .column-4,
.tablepress-id-1 .row-4 .column-2,
.tablepress-id-1 .row-5 .column-2,
.tablepress-id-1 .row-5 .column-3,
.tablepress-id-1 .row-7 .column-2 {
	background-color: #ffe5e5 !important; /* 背景色の指定 */
	color: #ff0000 !important; /* 文字色の指定 */
}

別のセルに背景色、文字色をそれぞれ設定する場合は
上記のCSSをもう1セット追記して、セルの番号を再度指定します。

「!important」について

背景色指定部分に「!important」という記入がありますが
これは他のスタイルシートより優先して表示させるという意味です。

表示させる順序をあえて乱すという意味では
進んで使いたいコードではないので
特に気にならなければ強いて使用しなくてもかまいません。

セルの横幅を指定する場合

テーブルのセルの横幅は初期設定のままだと自動で調整されます。

手動で幅を変更する場合はショートコードに記述を付け加えます。

元のコード：[table id=1 /]

幅調整のコード：[table id=1 column_widths="20%|40%|40%" /]

このように左の列から順に幅を指定します。
％で幅を指定する際は合計が100％になるよう指定してください。

なお、pxでも指定可能です。

ちなみに、テーブル全体の幅を指定する場合は
カスタムCSSに以下を追記すると変更できます。

.tablepress-id-1 {
	width: 80%; /* テーブル幅の指定 */
}

あとがき！

「TablePress」の解説は以上です(*^^*)

簡単に綺麗なテーブルが作成できるので便利ですね。

より詳細な使い方はTablePress公式サイトにありますが
英語なのでChromeの翻訳機能など使ってみてください～。

ただしショートコードとかも翻訳されます(笑)

TablePress公式サイトはこちらから