表の使い回しができる「TablePress」の使い方とカスタマイズ

この記事では「TablePress」の使い方、文字色を変更したり背景色や枠線を消す方法などお伝えします。

「TablePress」は表の使い回しやショーコード内で編集ができるので、表が作りが面倒な人、時短したい人にピッタリなプラグインです。

TablePressの公式ページ（https://tablepress.org/）は英語です。

公式ページは「ちょっと難しいなぁ」と思う人に、私が「これは便利！」と思ったところを解説したいと思います。

TablePressについて

投稿ページや固定ページの本文中でもブロックエディタでテーブルを指定すると、表を作ることができます。

ただ、この方法だと使い回しができません。TablePressなら面倒な表（テーブル）作りから解放されるプラグインです。

作られた表（テーブル）はショートコードで管理されるので、投稿ページや固定ページ、ウィジェットに表を載せることができます。

TablePressは、あなたが簡単に美しいテーブルを作成し、管理することができます。シンプルなショートコードを使用して、テーブルを投稿、ページ、またはテキストウィジェットに埋め込むことができます。テーブルデータは、スプレッドシートのようなインタフェースで編集できるため、コーディングは不要です。テーブルには、評価される数式を含め、任意の種類のデータを含めることができます。追加の JavaScript ライブラリは、サイト訪問者のための並べ替え、ページネーション、フィルター処理などの機能を追加します。テーブルは、Excel、CSV、HTML、JSON ファイルとの間でインポートおよびエクスポートできます。‎

「TablePressプラグイン詳細」より翻訳しました

TablePressができること6つ

TablePressは表の使い回しができるだけのプラグインではありません。

エクセルで作った表を取り込めば、一度作ったデータの使い回しが簡単にできる優れたプラグインです。

TablePressができることをまとめてみます。

TablePressをオススメする理由

私がTablePressを3年ほど使っていて、みなさんにオススメする理由はシンプルで使いやすいプラグインだからです。

また、TablePressの公式ページ（https://tablepress.org/）は英語ですが、分かりやすいので助かっています。

私の「ここがおすすめポイントだなぁ」ってところをリストアップします。

80万以上のサイトでインストールされているので、困った時は検索すれば何かしらヒットします。

私も困った時はまず検索して、いくつかサイトを見てますよ。

TablePressの残念ポイント：水平スクロール

上の画像は癖を知るために作ったテスト表です。縦3行、横18列以上の横に長い表です。1行目は「テスト」の文字を並べ、行には1文字から4文字のひらがなを並べました。

水平スクロールは自動で調整されるため、何列目から水平スクロールになるかわかりません。列が多い場合に表示されます。

自動調整は列の幅、行の長さも変更されます。上のテスト表のように「テスト」の文字が縦に配置されました。

水平スクロールを適用しなければ幅は「width:100%」ですが、適用されればセルの横幅が自動で調整され狭くなります。セル内の文章は指定ができないため思わぬところで自動改行され、見た目が揃わない原因になります。

また、住所や年表など1つのセルが長い場合の横長の表には水平スクロールは表示されません。

TablePressの残念なポイント：レスポンシブ化されていない

残念ながら表はレスポンシブ化されていません。

ウェブサイト上のテーブルの技術的な仕組みにより、常に自動的に画面上の利用可能なスペースに調整することはできません。その理由は、コンテンツに一定の最小領域が必要であり、それがテーブルの最小幅を定義するためです。テーブルの最小幅が使用可能なコンテンツ領域の幅よりも大きい場合、テーブルは収まりません。残念ながら、これは、次の例のように、テーブルの一部が右側で切断される可能性がある携帯電話やタブレットのような小さな画面で醜い動作につながる可能性があります。

「TablePress」拡張機能ページを翻訳しました

対応策は下に書きましたので参考にしてくださいね。

TablePressの基本的な使い方

ここからはTablePressの使い方を解説してきます。

TablePressをインストールするとダッシュボードのメニューに追加されます。

TablePressメニューの中から「新しいテーブルを追加」をクリックして、新規画面を開きます。

ダッシュボードのTablePressメニュー以外にも編集画面にタブがるので、マウスで左に動かすより、上に動かす方が手首がつらくないので、どちらからでもたどり着けるのは便利です。

ちょっとおさらい：テーブルの名称

テーブルの作り方の前に、テーブルの基本語句です。

TablePressのデモテーブルにTablePressに必要な基本語句です。

表（テーブル）の作り方

さて、テーブルを作成していきましょう。

新しいテーブルを追加する

新しいテーブルを追加作成するために、テーブルの名前や行数、列数を設定します。

入力が終わったら、「テーブルを追加」ボタンをクリックします。

あとで、行や列などは修正できるので、まずは適当に入力しても大丈夫ですよ。

テーブルにデータを入力する

実際に作成した表を例にします。202２年度の厄年早見表です。

8行6列の表で、1行目はセル3つ分を1つのセルに結合して、女性・男性に分けています。

縦の数字は行、横のアルファベットは列を表しています。

セル同士を結合させる方法

セル同士を結合させたいときの指定です。横に結合したいときは「#colspan#」を使い、縦に結合したいときは「#rowspan#」を使います。

colspanやrowspanはHTMLでもセルの結合に使います。HTMLの知識がWordPressのプラグインでも役立つのでHTMLを勉強して損はないですよ。HTMLの基本的なタグをまとめた記事がありますのでよかったら読んでみてくださいね。

1行目のBC,DEに「#colspan#」と書かいてあります。「#colspan#」は左となりのセルと結合を表しています。BはAと結合し、CはBと結合しています。つまり、ABCは1つのセルに結合されています。

列や行の挿入と追加

セルにデータを入力している途中で、行を増やしたいとき、画像を挿入したいときは「テーブルの操作」を使います。

操作方法は3種類です。分かりやすいように色分けしました。

①紫色はボタンをクリックするとメッセージが表れるのでメッセージを読めばいいのですが、「挿入」と「追加」はちょっと間違えやすいです。

「挿入」は行と行、列と列の間に行または列を加えることです。

「追加」は最終行（または列）に指定の行数を加えることです。

「テーブルのオプション」について

テーブルのオプションです。画像は3つチェックを入れた状態です。

1. テーブルの最初の行をテーブル見出しにする
2. 連続する行の背景を別々の色にする（デフォルト）
3. マウスカーソルを行に合わせている間、行の背景色を変更してハイライト表示する

チェックした1～3は次のようになりました。

1. テーブルの最初の行を見出しに設定すると、背景が水色になります
2. 行の背景色が白とグレーの交互になります
3. マウスカーソルを合わせている間、やや濃いグレー色になります

他には、初めに設定したテーブル名と説明を表示させること、テーブルフッターを表示させることができます。

追加のCSSクラスを用いれば、TablePressの「プラグインのオプション」で細かくテーブルのデザインを調節・変更することができます。

「DataTables JavaScriptライブラリの機能」を有効化する

「DataTables JavaScriptライブラリの機能」を有効化すると、読者が表を自分で見やすいようにアレンジすることができるようになります。

また、横に長い表の場合水平スクロールを使用することができるようになります。

ただ、「テーブルオプション」の「テーブルの最初の行をテーブル見出しにする」にチェックが入っていないと、有効化できません。

読者がデータを並び替えできて便利ですが、あまり神社のホームページには必要のない機能の用に感じます。表の内容や大きさに合わせてチェックをいれたらいいと思いますよ。

「水平スクロール」は列が多く横に長い表のときはチェックを入れると、水平スクロールが表示されます。

セルの横幅が自動調節されるので、あまり見た目がよくありません。

「テスト」や他のセルの文字が縦文字に調整されています。

TablePressの表を中央・左・右に揃える方法

テーブルを呼び出す際のショートコードに<div>タグで囲みます。<div>タグはブロックを央揃えや左右に寄せるのに使える便利なタグです。

中央揃えと左・右寄せをまとめると以下のようになります。

セル内の中央揃えは、下の「CSSでアレンジする方法」で解説しますね。

<!--  中央揃え・その1 -->
<div align="center">[TablePressのショートコード]</div>

<!--  中央揃え・その2 -->
<center>[TablePressのショートコード]</center>

<!--  左寄せ -->
<div align="left">[TablePressのショートコード]</div>

<!--  右寄せ -->
<div align="right">[TablePressのショートコード]</div>

カラムに入れたりグループ化してショートコードを使わない方法を試したのですが、できないようです。

また、コードエディターに書く方法がありますが、直接ショートコードに書き込む方が早いと思います。

WordPressでも困った時にコードエディターで使えるので、HTMLの知識は知っておいて損はしません。沢山あるタグの中からよく使うタグをまとめた記事です。よかったらどうぞ。

TablePressをレスポンシブ化する方

TablePressは表の最小幅が設定されているため、レスポンシブ化されていません。

そのため、拡張プラグインをダウンロードすればレスポンシブ化が可能になります。

拡張機能をダウンロードするのに抵抗がある人はスクロールをつける方法があります。

拡張プラグインを公式サイトからダウンロードする

公式サイトの「拡張　機能(EXTENTIONS)」の「Responsive Tables」からダウンロードします。

12ドル以上の寄付のお願いが書かれています。ご判断はお任せします。

スクロールを表示させる

直接ショートコードにタグを書くと便利です。

自動調整されますが、この方法が簡単です。

<div style="overflow : auto;">
[table id=数字 /]
</div>

スマホやブラウザの幅を狭めると水平スクロールが自動で表示されるようになっています。

DataTables JavaScriptライブラリの機能 の中にも水平スクロールがありますが、こちらは最初の行を見出しにする必要があります。

表をカスタマイズしよう

表の文字や背景色などの編集はショートコードとCSSで行う事が出来ます。

ここからは表のアレンジを解説しますね。

ショートコードでセル幅を調節しよう

表のセル幅（カラム）を調整したいときは、ショートコードに直接記入する方法が一番簡単です。

パーセント（％）とピクセル（px）の2種類が使えます。

ただし、パーセント（％）の場合は合計が100パーセント（％）になるように指定します。

書き方は、左のセル幅からしていします。

[table “span” not found /]

例えば、上で使ったサンプル表を次のように指定します。

[table id=15 column_widths="100px|150px|80px|40px|100px"/]

25列ですが、左から5列分だけ指定しました。さて、6列目からはどうなるでしょうか？

すると、こうなりました！

左から指定通り、100ピクセル、150ピクセル、80ピクセル、100ピクセルとなっていますね。

25列の表なので6列目からは指定してません。6列目からは自動調整されました。

CSSでアレンジする方法

ここからはCSSでアレンジする方法です。8つ紹介します。

編集する場所は「TablePress/プラグインのオプション/カスタムCSS」です。

日本語と英語が編集画面で混じっている場合があります。

そんな時は文章を選択して、右クリックをします。

メニューが表示されるので、「選択範囲を日本語に翻訳」をクリックします。ちなみに私のブラウザはEdgeです。

すると、日本語になりました！

＊「.tablepress-id-数字」と例にしていますが、表全てに反映させたい場合は「.tabalepress」でよくて「-id-数字」はいりません。

表の横幅を指定する

表の横幅(width)をパーセント（％）、またはピクセル（px）で指定します。

サンプル表の幅を50パーセントに指定します。

.tablepress-id-数字 {
width: 50%;
}

スマホの方は見て分かると思いますが、スマホで見ると表が崩れています。

表によってはサイズを小さくしない方がいいと思いますよ。

特定の列幅を指定する

特定の列幅をパーセント（％）またはピクセル（px）で指定します。

1・2列目は25パーセント、3列目を50パーセントに指定しました。パーセントの場合は合計100パーセントになるように指定します。

.tablepress-id-数字 .column-1 , .column-2 {
width:25%;
}
.tablepress-id-数字 .column-3 {
width:50%;
}

わかりやすいように、表の枠はすべて表示させています。

表の枠を削除または表示する

表の枠線を消します。TablePressは横線だけ設定されている状態です。

.tablepress-id-数字,
.tablepress-id-数字 tr,
.tablepress-id-数字 tbody td,
.tablepress-id-数字 thead th,
.tablepress-id-数字 tfoot th {
	border: none !important;
}

テーブルオプションの「連続する行の背景を別々の色にする（デフォルト）」のチェックを外して、背景色をなしにしています。

また、「!important」をつけてCSSの指示を強力にしました。

逆に、枠を表示させたいときは「border」以下を次のように指定します。線のスタイルは好きなように設定できます。

border:1px solid #aaaaaa;

ただし、「Cocoon」ではチェックを外しても背景色がつきますので、さらに指定が必要です。

.tablepress-id-数字 td {
	background-color: #fff !important;
}

行の背景色を変える

さきほど、Cocoonで背景色を白にしました。これを応用して背景色を変えてみましょう。

特定の行の色を変える

特定の行の背景色を変えます。千葉県の3行目の背景色を変えてみます。

/* テーブルオプションで背景色のチェックを外しても着く場合は、先に全ての行の背景色を白にする */
.tablepress-id-数字 td {
	background-color: #fff !important;
}

.tablepress-id-数字 .row-3 td{
	background-color: #dcf7e0;
}

変えたい行数を「.row-数字」で指定します。tdはセルを表しています。

「3行目のセルの背景を緑色(#dcf7e0)にしてね」という意味になります。

交互の行の背景色を変える

今度は交互の行の背景色を好きな色に変えますよ。

1行目と3行目（奇数行）を緑色（#dcf7eo）に変更します。

.tablepress-id-数字 .odd td {
  background-color: #dcf7e0;
}

奇数は「.odd」、偶数は「.even」で指定します。

見出しの色を変える

表の見出しの色を水色から好きな色に変更します。

前提条件として、テーブルオプションの「テーブルの最初の行をテーブル見出しにする」にチェックを入れます。

.tablepress-id-数字 thead th {
  background-color: #f5c2db;
}

テーブルフッターを設定した場合は

.tablepress-id-数字 tfoot th {
  background-color: #f5c2db;
}

カーソルを合わせている行のハイライト色を変える

テーブルオプションでチェックを入れると、マウスカーソルを合わせている間、やや濃いグレー色になります。

やや濃いグレー色を好きな色に変えます。

これもチェックを入れていないと反映されません。

.tablepress-id-数字 .row-hover tr:hover td {
  background-color: #f5c2db;
}

特定のセルの文字の大きさ、文字色、背景色を変える

ここまできたら、アレンジする力がついてきていますよ！あと少しです。

次は、さいたま市の人口を目立つようにしました。また、3列目は右寄せにして数字を読みやすくしました。

.tablepress-id-数字 .column-3 {
	text-align: right;
}

.tablepress-id-数字 .row-4 .column-3 {
	background-color: #f5c2db;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ff0000;
}

セル内の文字を揃える

次は、セル内の文字揃えです。上のCSSに既に出てきてますが・・・

県庁所在地は中央揃え、人口は右寄せに設定しました。わかりやすいように枠を表示しています。

[text-align]セレクタで指示をします。中央揃えなら「center」、右寄せなら「right」です。デフォルトは左寄せになっていますよ。

.tablepress-id-数字 .column-変更させたい列数 {
	text-align: center;
}

以上、TablePressについて使い方とカスタムの方法をまとめました。お役にたったら幸いです。

CSSについてまとめた記事があります。HTMLの知識と同様に知っていて損はしないと思います。余裕がある方はどうぞ。

最後までお付き合い頂き、ありがとうございました。お疲れ様でした。