ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

【WordPress】見やすい表(テーブル)を作成する方法(TablePress)

「TablePressの使い方を覚えて、見やすい表を作りたい!」

WordPressの記事に料金表や比較表を入れる際、TablePressの使い方を覚えておくと、HTMLタグを直接書かなくても簡単にきれいな表を作成できます。当記事でわかることは次の3つです。

  • TablePressのインストール・初期設定の方法
  • 行や列の追加、セルの結合、中央揃えなど基本操作
  • CSVデータの一括インポートや表を見やすくする装飾方法
ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

TablePressで表を作成する前に知っておきたいこと(前提条件)

まずはTablePressがどんなプラグインなのか、どこまで無料で使えるのかを確認しておきましょう。ここを押さえておくと、後の作業でつまずきにくくなります。

「TablePress」は、WordPressの記事や固定ページに表(テーブル)を挿入できる無料プラグインです。HTMLやCSSの知識がなくても、Excelのような入力画面でセルにデータを打ち込むだけで、見やすい表を作成できます。

料金表・比較表・スペック表など、行と列で整理したい情報がある場面で活躍します。

有効インストール数60万以上の定番プラグインで、詳しい仕様はWordPress.orgの公式ページでも確認できます。

本記事はWordPress 7.0+TablePress v3.3.2の環境で動作確認しています。

無料版でできることは幅広く、次のような機能がすべて料金なしで利用できます。

  • 表の作成・編集・管理
  • データのソート・ページネーション・検索
  • セル内への画像・リンク・数式の挿入
  • Excel/CSV/HTML/JSON形式のインポート・エクスポート
  • ブロックエディタ・Elementorウィジェット・ショートコードでの埋め込み
  • カスタムCSSによる装飾(背景色・枠線など)

一方で、次のような一部の高度な機能は有料のPro/Max版限定です。無料版だけでも十分実用的ですが、あらかじめ線引きを知っておくと安心です。

  • 列を自動的に折りたたむ高度なレスポンシブオプション
  • 高度なフィルタリング・検索
  • スクロールしても固定されるテーブルヘッダー・列
  • 自動の定期インポート
  • カスタムスタイリングオプション
この記事で扱う範囲
当記事では、無料版だけで完結する範囲を中心に解説します。料金表や比較表を作って記事に挿入するだけなら、無料版で問題なく対応できます。

STEP1:TablePressをインストール・有効化する

WordPressの管理画面で「プラグイン」→「プラグインを追加」を開き、キーワード検索欄に「TablePress」と入力します。検索結果に表示されたら「今すぐインストール」→「有効化」の順にクリックすれば導入は完了です。管理画面の左メニューに「TablePress」の項目が追加されます。

プラグイン追加画面—TablePress検索結果と今すぐインストール
▲ 「TablePress」を検索し「今すぐインストール」をクリック

STEP2:新しい表を作成する

「行数や列数を最初に入力するみたいだけど、間違えたらどうしよう…」

行数・列数は表を作るときの目安として入力するだけで、後からいつでも追加・削除できます。まずはだいたいの数で入力して進めて大丈夫です。それでは新しい表を作っていきましょう。

1. 「TablePress」→「新しいテーブルを追加」を開く

左メニューの「TablePress」にマウスを合わせ、「新しいテーブルを追加」をクリックします。表の初期設定を入力する画面が開きます。

WordPress管理画面—TablePressメニューの新しいテーブルを追加
▲ 左メニュー「TablePress」→「新しいテーブルを追加」

2. テーブルの名前・説明・行数・列数を入力する

「テーブルの名前」には、その表がどんな内容かがわかる名前を付けます。「説明」欄は任意で、記事上には表示されない管理用のメモです。表そのものには出てこないため、自分がわかるように自由に書いて構いません。

表が1つだけならシンプルな名前で十分ですが、複数の表を運用していくと名前だけでは見分けがつきにくくなります。たとえば「料金表_2026年版」のように、内容と更新時期がわかる名前を付けておくと、後で管理画面から目的の表を探しやすくなります。

「行数」「列数」には作りたい表のおおよそのサイズを入力します。前述のとおり後から変更できるので、この時点では厳密でなくても問題ありません。

TablePress—新しいテーブルを追加フォームの入力例
▲ テーブルの名前・説明・行数・列数を入力

3. 「テーブルを追加」をクリックする

入力が終わったら「テーブルを追加」をクリックします。テーブルの編集画面が表示され、続けて中身を入力できる状態になります。

STEP3:表にデータを入力する

表の枠ができたら、実際にデータを入れていきます。操作はとても直感的で、表計算ソフトを触ったことがあれば迷わないはずです。

1. セルに直接入力する

編集画面に表示されたマス目(セル)をクリックすると、その場で文字を入力できます。行を移動しながら順番に打ち込んでいくだけで、表の中身が完成します。入力した内容は「変更を保存」を押すと保存されます。

TablePress—テーブル編集画面でのセル入力
▲ セルをクリックしてデータを入力

2. 行・列を追加/削除する

データを入力していて行や列が足りなくなったら、編集画面の操作ボタンから追加できます。逆に不要な行・列は選択して削除も可能です。作成後でも自由に増減できるので、最初のサイズにこだわる必要はありません。

TablePress—テーブルの操作パネルの行・列追加削除ボタン
▲ 行・列の追加や削除もこのパネルから操作

3. CSV・Excelデータを一括インポートする

すでにExcelやスプレッドシートで表を作っているなら、1マスずつ手入力する必要はありません。CSV形式で書き出してインポートすれば、一気に表へ流し込めますよ。

すでに手元にExcelやスプレッドシートのデータがある場合は、一括インポートが便利です。TablePressはExcel/CSV/HTML/JSON形式のインポートに対応しており、この機能は無料版で利用できます。

手順としては、左メニューの「テーブルをインポート」(テーブル編集画面内では「インポート」タブ)を開き、ファイルをアップロードするか内容を貼り付けて取り込みます。新しいテーブルとして追加するほか、既存の表を置き換える・既存の表に行を追加することも選べます。

MEMO

Excelで作った表は、いったんCSV形式で保存してからインポートすると文字化けや崩れが起きにくくなります。まずは小さな表で試してみるのがおすすめです。

TablePress—テーブルをインポート画面でのCSVファイル選択
▲ CSVファイルを選択してインポート

ここまでの操作でデータを入力すると、編集画面全体は次のようになります。「テーブル情報」でテーブルの名前やショートコードを確認しながら、「テーブルの内容」でデータを編集していきます。

TablePress—テーブル編集画面の全体構成
▲ データ入力後のテーブル編集画面の全体像(テーブル情報・内容編集エリア)

STEP4:表を見やすく装飾する

データを入れただけの表でも使えますが、少し手を加えるだけでぐっと見やすくなります。ここでは代表的な装飾を紹介します。なお、具体的なメニュー名や操作位置はバージョンによって多少変わることがあるため、実際の画面の表記も合わせて確認してください。

1. セルを結合する

見出しをまとめたいときなどは、隣り合うセルを結合できます。結合したいセルを範囲選択し、「テーブルの操作」パネルにある「Combine/Merge」ボタン(英語表記)をクリックすると、結合先のセルに自動で「#colspan#」というマーカーが入力され、保存後に横方向のセルとして結合表示されます。1つのセルに複数項目の見出しをまとめたい場合や、注釈行を表の幅いっぱいに表示したい場合に役立ちます。

TablePress—セル結合のCombine/Mergeボタン
▲ セルを範囲選択して「Combine/Merge」をクリック
MEMO

「テーブルのオプション」で「Table Features for Site Visitors(ビジター向けの機能)」を有効にしている場合、本文(見出し行・フッター行以外)のセル結合はできません。逆に、本文のセルがすでに結合された状態では、この機能自体をオンにできません。注釈行などをセル結合したい場合は、この機能をオフのままにしておきましょう。

2. 文字を中央揃え・左右揃えにする

数値を並べる列は中央揃えや右揃えにすると、桁がそろって読みやすくなります。TablePressでは、後述するカスタムCSSを使って列や表全体の文字位置を指定します。数値は右揃え、見出しは中央揃え、といった使い分けがおすすめです。

TablePress—文字揃えを適用したプレビュー画面
▲ 文字揃えを適用したプレビュー

3. 背景色・枠線を設定する

表の見出し行に背景色を付けたり、枠線をはっきりさせたりすると、情報の区切りが伝わりやすくなります。こうした装飾はカスタムCSSで設定でき、無料版で利用可能です。

設定は、左メニューの「プラグインのオプション」を開き、「カスタムCSS」欄に装飾用のコードを記述します。たとえば .tablepress-id-1 th { background-color: ...; } のように見出し行の背景色を変える、セルの枠線の色や太さを調整する、といったことができます(「1」の部分は表ごとのテーブルIDに置き換えます)。

カスタムCSSの活用ポイント
一度カスタムCSSで基本の見た目を整えておくと、その後に作る表すべてに同じスタイルが適用され、サイト全体の統一感を保てます。
TablePress—プラグインのオプション画面のカスタムCSS欄
▲ 「プラグインのオプション」のカスタムCSS欄

4. 列の幅・表全体のサイズを調整する

列の幅がそろっていないと、内容が詰まって見えることがあります。幅の指定にはカスタムCSSを使い、単位の使い分けがポイントです。

  • px(ピクセル)指定:たとえば「120px」のように、常に一定の幅で固定したいときに使います。画面サイズが変わっても幅は変わりません。
  • %(パーセント)指定:たとえば「30%」のように、表全体に対する割合で幅を決めます。画面幅に応じて伸縮するため、レイアウトが柔軟になります。

数値をきっちり固定したい列はpx、画面に合わせて可変にしたい列は%、というように用途で使い分けると調整しやすくなります。

TablePress—カスタムCSSでの列幅指定
▲ カスタムCSSで列幅をpx・%指定

5. スマホで見たときの表示を確認する

表を作ったら、スマートフォンでの見え方も確認しておきましょう。ここは無料版とPro/Max版で挙動が分かれるポイントなので、正直にお伝えします。

列数の多い表をスマホで表示すると、画面幅に収まりきらないことがあります。無料版では、こうした場合に表を横スクロールできる基本表示で対応します。画面からはみ出す分は横スクロールで確認する形になり、大きくレイアウトが崩れる心配はありません。

注意

「列を自動的に折りたたんで縦並びにする」といった高度なレスポンシブオプションは、有料のPro/Max版限定の機能です。無料版では横スクロール表示になる点を理解した上で、スマホでの見え方を確認してください。

ここまでできれば、見やすい表の完成まであと少し!装飾を整えた表は、それだけで記事の説得力がぐっと上がりますね。
TablePress—スマートフォン表示でのテーブル確認
▲ スマホでは横スクロールで表示される

STEP5:作成した表を投稿・固定ページに挿入する

表が完成したら、いよいよ記事に挿入します。挿入方法は、使っているエディタによって少し異なります。

1. ショートコードをコピーする

表の編集画面には、その表専用のショートコードが表示されています。形式は次のようなものです。

[table id=xx /]

「xx」の部分には表ごとに割り振られた番号(テーブルID)が入ります。このショートコードをコピーしておきます。

TablePress—テーブル情報欄のショートコード表示
▲ テーブル情報欄に表示されるショートコード

2. 投稿の編集画面に貼り付ける

コピーしたショートコードを、表を表示したい位置に貼り付けます。クラシックエディタの場合は、編集画面上部の「コード」タブに切り替え、本文の該当箇所に [table id=xx /] をそのまま貼り付ければ表示されます。

一方、ブロックエディタを使っている場合は、専用の「TablePress」ブロックを追加し、一覧から挿入したい表を選ぶだけで済みます。この方法なら、ショートコードを直接入力する必要がありません。使っているエディタに合わせて選んでください。

投稿編集画面—ショートコードの貼り付け
▲ 投稿編集画面「コード」タブにショートコードを貼り付け

3. プレビューで表示を確認する

貼り付けたら、公開前に必ずプレビューで実際の表示を確認します。表がイメージどおりに出ているか、崩れがないかをチェックしましょう。問題なければ、そのまま公開・更新します。

投稿プレビュー画面—挿入した表の表示確認
▲ プレビューで表の表示を確認

作成した表を編集・削除する方法

公開後に表の中身を直したいときは、「TablePress」の一覧画面からいつでも編集できます。修正したい表の名前をクリックすれば編集画面が開き、内容を変更して保存するだけで、記事側の表示も自動で更新されます。ショートコードを貼り直す必要はありません。

不要になった表は、一覧画面から削除できます。ただし1点だけ注意してください。

注意

削除した表は元に戻せません。まだ記事に挿入している表を削除すると、その記事で表が表示されなくなります。削除する前に、その表がどの記事で使われていないかを確認しましょう。

表が増えてくると、どれがどの記事の表なのか分からなくなりがちです。そこで役立つのがテーブルIDです。

記事に貼ったショートコード [table id=xx /] の番号と、一覧画面の表のIDを照らし合わせれば、どの表がどこで使われているかを特定できます。

前述のとおりテーブルの名前を「料金表_2026年版」のように分かりやすく付けておくと、管理はさらに楽になります。

💡 表を多用するサイトほど表示速度に差が出ます
TablePressで表を増やしていくと、その分ページの読み込みデータ量も増えていきます。表をたくさん使う記事や比較サイトほど、サーバー自体の処理速度が表示スピードに直結します。
ラッコサーバーならLiteSpeedベースの高速環境で、表を多用したページでもストレスなく表示できます。
→ 月額330円〜、10日間無料お試しでリニューアル前に速度を体感できます。

よくある質問

TablePressとは何のプラグインですか?

WordPressの記事や固定ページに表(テーブル)を挿入するための無料プラグインです。HTMLやCSSを書かなくても、入力画面でセルにデータを打ち込むだけで料金表や比較表を作成できます。

TablePressで文字を中央揃えにするにはどうすればいいですか?

TablePressのカスタムCSS機能を使って、列や表全体の文字位置を指定します。詳しい考え方は「STEP4:表を見やすく装飾する」の中央揃え・左右揃えで解説しています。数値は右揃え、見出しは中央揃えのように使い分けると読みやすくなります。

TablePressは無料で使えますか?

はい、基本機能は無料版で利用できます。具体的には、表の作成・編集、カスタムCSSによる装飾、CSVインポート、ショートコードやブロックエディタでの挿入まで無料で対応可能です。

一方、列を自動的に折りたたむ高度なレスポンシブ表示や、固定ヘッダー・自動定期インポートなど一部の高度な機能は、有料のPro/Max版限定です。

スマホで見たときに表のレイアウトが崩れませんか?

無料版は横スクロール表示に対応しているため、列数が多い表でも大きく崩れることはありません。画面に収まらない部分は横スクロールで確認する形になります。列を自動で折りたたんで縦に並べ替える高度なレスポンシブ表示は、Pro/Max版の機能です。

表がうまく表示されない・崩れるときはどうすればいいですか?

まずショートコードのテーブルID([table id=xx /] の番号)が正しいかを確認してください。番号が違うと表が表示されません。

見た目が崩れる場合は、カスタムCSSの記述ミスや、テーマ側のスタイルとの干渉が原因のこともあります。プレビューで確認しながら、少しずつCSSを調整すると原因を切り分けやすくなります。

目次を作りたい場合もTablePressを使えますか?

いいえ、目次の自動生成はTablePressの役割ではありません。目次は専用のプラグインを使うのが一般的です。詳しくは【WordPress】目次を表示する方法で解説しているので、そちらを参考にしてください。

まとめ

TablePressを使えば、HTMLタグを直接書かなくても、料金表や比較表といった見やすい表を簡単に作成できます。この記事の流れをおさらいします。

  • インストール・有効化後、「新しいテーブルを追加」で表を作成する
  • セルへの直接入力やCSVインポートでデータを入れる
  • カスタムCSSで背景色・枠線・文字揃え・列幅を整える
  • ショートコードまたは専用ブロックで記事に挿入する

無料版だけでも、表の作成から装飾・挿入まで一通りの作業が完結します。列を自動で折りたたむ高度なレスポンシブ表示などはPro/Max版限定ですが、通常の記事で表を使う分には無料版で十分実用的です。

まずは小さな表から作って、TablePressの使い方に慣れていきましょう。