WordPressで表を作成するなら「TablePress」というプラグインがオススメ!

wordpressで表を作成する場合、私はhtmlで自作していました。しかし複雑な表の場合、どう作ればいいのかわかりませんでした。
ただこの度、表を作成するのにとても便利なプラグインを発見したのでそれを紹介したいと思います。

スポンサーリンク

表を作成できるプラグイン「TablePress」

プラグイン新規追加でTablePressと検索すると出てきます。インストールした後は有効化してください。

そしてそのまま表を作成するのもいいのですが、その場合なぜか縦の線が表示されません。
縦の線を表示させたい場合は少しコードを追加する必要があります。

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

こちらのコードをTablePressのプラグインのオプション画面、カスタムCSSの空欄の所に追加します。

そうすれば縦の線が表示されるようになります。

表の作成方法

まず新しいテーブルを追加します。

テーブルの名称はなんでもかまいません。名称を見た時、自分で何のテーブルかわかればいいと思います。

説明は記入しなくても大丈夫です。

後は行数と列数を決めます。

例として遊戯王のモンスターの攻撃力、守備力の表を作成してみました。

行や列を追加したり、逆に削除したりすることもできます。またセルの結合なども可能です。
と、いったようにいろいろ編集ができるのでお好みに合わせて調整してみてください。

デーブルが完成したら、「変更を保存」をクリックします。

そして編集画面の1番上にショートコードがあります。ちなみに1つのテーブルには1つのショートコードが存在しています。
そのショートコードをコピーして記事内に貼りつけます。

すると

デュエルモンスターズ攻撃力守備力
ブルーアイズホワイトドラゴン3,0002,500
ブラックマジシャン2,5002,100
ベビードラゴン2,000900
封印されしエクゾディア

このような表が作成できます。

このままでもいいっちゃいいですけど、表の幅が気になる場合はショートコードの後ろに「column_widths」を追加してみましょう。

デュエルモンスターズ攻撃力守備力
ブルーアイズホワイトドラゴン3,0002,500
ブラックマジシャン2,5002,100
ベビードラゴン2,000900
封印されしエクゾディア

見栄えが良くなりましたね。(※PCで閲覧した場合だと見栄えの違いがわかりますが、スマホの場合だと見栄えがあまり変わりませんでした。(笑)

 column_widths="250px"

「250px」と列幅を指定しました。この場合、一番左の表の列幅が250pxとなり、残りの列幅は自動調整となります。ちなみに全列幅指定することもできます。

まとめ

今まで表作成ではhtmlを使用していましたが、「TablePress」という素敵なプラグインを発見できて今度からはこちらを使用していきたいと思っています。

まだこのプラグインを使用したことない方、一度使ってみてはいかがでしょうか?

スポンサーリンク