レスポンシブ対応の「表」を簡単に作れる！「TablePress」プラグインを徹底解説！

2020年3月22日2022年8月31日

こんな方に読んで欲しい！

WordPressの「表」を、スマホで綺麗に表示させたい！
セルの結合がうまくいかない
表の装飾やメンテナンスを簡単にしたい
量の多いデータをブログで見られるようにしたい

ブログに表を挿入し公的なデータをユーザーに紹介することはブログの信頼性を上げるために必須のテクニックですが、WordPress標準のツールで表を作るにはかなりの時間と労力がかかります。

最も簡単に表を挿入する方法として、Excelで作った表をコピーペーストする方法がありますが、表の中にセルの結合などがある場合レイアウトが崩れて思ったように表示されないことがあります。

今回の記事では、簡単に見やすい表をつくることができるWordPressプラグイン「TablePress」を徹底解説します！

「TablePress」のデザインを変更したい方は「コピペOK！WordPressプラグイン「TablePress」で見やすい表を作る5種類のCSSを公開！」の記事をご覧ください。

TablePressのメリット

TablePressで作る表は標準でレスポンシブに対応しています。スマホで見てもレイアウトが崩れず表示されますし、文字数が多い場合は自動でスクロールバーが表示され、スクロールできるように設定できます。

TablePressは表と本文とを別で管理するので、統計など定期的に内容が変わるような表の場合でもデータの更新やメンテナンスがとても簡単です。

TablePressでは、ユーザーが表の内容を自由に検索したり並べ替えしたりできるので、まるで商用サイトのような性能比較やランキングを作ることも可能です。

下記はTablePressを使うメリットをまとめたものです。

標準でレスポンシブルに対応している
WordPress標準エディタよりも簡単に表が作れる
本文とは別に表を管理するので、表の更新が簡単
表ごとにCSSを設定できるので、見栄えの良い表を作れる
データ量の大きな表の挿入も簡単
ユーザーが表の並び替えや抽出を操作できる

TablePressの導入方法

TablePressはWordPressの公式プラグインなので、お使いのWordPress管理画面左側から簡単に導入できます。

WordPress管理画面プラグインページの右側にある検索枠に「 TablePress 」とキーワードを入力すると1番目にヒットするので「今すぐインストールボタン」をクリックします。

インストールが終了したら、プラグインを「有効化」します。

インストール済みプラグイン一覧に「 TablePress 」が追加されたことを確認したらイストール完了です。

WordPress管理画面左側メニューに「TablePress」というメニューが表示されますので、すぐに使い始められます。

メンテナンスが簡単！TablePressの使い方

通常、ブログに表を挿入する場合、本文に直接HTMLで記述するか、エディタの機能を使いますが、TablePressは本文とは別に表を作っておき、本文にはショートコードを使って反映させます。

新しく表を作るには、WordPress管理画面の左側メニュー「TablePress」をクリックし、「新しいテーブルを追加（もしくは新規追加）」を選択します。

表のタイトル、行数、列数を指定してテーブルを追加します。

説明文は省略可能ですが、後からの管理が楽になるので簡単に記述しておくと良いでしょう。

「テーブルを追加」をクリックすると表の編集画面に画面が変わるので、表の内容を記述して「変更を保存ボタン」をクリック、右上のショートコードを本文に貼り付ければ表の完成です。

TablePressのセルの結合方法

セルの結合を行うには、TabelPressの表編集画面の下段にある「テーブル操作」の「セルの結合」で行います。

表の縦方向に結合を行いたい場合は、結合したいセルの下側セルを選択して「同じ列内（rowspan）」をクリックします。

表の横方向に結合を行いたい場合は、結合したいセルの右側セルを選択して「同じ行内（colspan）」をクリックします。

「同じ列内（rowspan）」と「同じ行内（colspan）」を組み合わせれば、広い範囲のセルを結合することも可能です。

表の操作が簡単

テーブルの操作ではセルの結合の他にもさまざまな操作ができます。

行や列の表示・非表示

データを残したまま表についているチェックボックスで指定した列や行を非表示にできます。

非表示にしている列や行は赤色に反転するので、同じ場所を選択して表示に切り替えることも可能です。

行や列のコピー・挿入・削除

表のチェックボックスで位置を指定して行や列のコピー・挿入・削除ができます。

表の並び替え

行番号や列記号にマウスカーソルを合わせてドラッグすることで、並び替えができます。

行や列を新しく追加

行や列を新しく追加させることが可能で、テキストボックスに追加したい列数や行数を指定すれば一気に複数追加できます。

表を見やすくするオプションが豊富

TablePressではテーブルのオプションという項目で、チェックボックスを指定するだけで表を見やすくできます。

見出し行やフッター行が指定できる
色をつけて行を見やすくする
テーブル名と説明文を表示できる

表ごとに指定できる簡単なCSSでもっとわかりやすい表を作る

TablePressでは表ごとにCSSが使えるので、フォントや、セル内での文字揃え、罫線など様々な装飾が可能です。

表ごとのカスタムCSSを作るには

表ごとのカスタムCSSは TablePress>プラグインのオプション>カスタムCSS のテキストボックス内に記述します。

表にCSSクラスを設定する方法

TablePressでは表に反映させたいCSSクラスを指定できるので、いくつかサンプルを作っておけば状況に合わせて使い分けができます。

一覧から反映させたい表を選んで、テーブルのオプション>追加のクラスでクラス名を入力すれば完了です。

表IDごとにCSSを設定する方法

CSSクラス名を下記のようにすればテーブルオプションでクラス名を入力しなくても、CSSを指定できます。

記述例）.tablepress-id-表ID番号　下記は表ID３番を指定しています。

.tablepress-id-3 thead th,
.tablepress-id-3 tbody tr td,
.tablepress-id-3 tbody td,
.tablepress-id-3 tfoot th {
	border-style: solid;
}

コピペで簡単表のCSSサンプル

下記にTablePressの表で使用する簡単なサンプルを記述しておきますので、コピペで使用するなど自由にお使いください。

/* セルに枠線を付加する */
.t_sample1 thead th,
.t_sample1 tbody tr td,
.t_sample1 tbody td,
.t_sample1 tfoot th {
	border-style: solid; /* 罫線を実線で描画 */
	border-width: 1px; /* 罫線の太さ */
	border-color: #ccc; /* 罫線色を指定 */
	vertical-align: middle; /* セルの上下を中央ぞろえ */
	text-align: center; /* セル内左右をぞろえ */
}