「WordPressに表を作りたいのに、スマホで横に崩れてしまった…」「セル結合ができなくてプラグインを探しているけど、どれを選べばいいかわからない」。そんな悩みを持つ方は多いのではないでしょうか。
WordPressにはブロックエディタ（Gutenberg）に標準の「テーブルブロック」が搭載されており、シンプルな料金表や仕様表ならプラグインなしで作成できます。ただし、セル結合・細かい装飾・レスポンシブ（スマホ対応）・Excel連携などが必要になると、プラグインの検討が必要です。
本記事では、標準テーブルブロックの基本操作から、目的別のプラグイン比較、スマホで崩れないレスポンシブ対応の実装方法まで、用途に応じた最適解をわかりやすく解説します。
WordPressの標準テーブルブロックで表を作る手順
WordPressのブロックエディタ（Gutenberg）には、最初から「テーブル」ブロックが搭載されています。プラグインをインストールしなくても、シンプルな料金表や仕様表であればすぐに作成できます。まずは基本の操作手順を確認しましょう。
ステップ1：テーブルブロックを追加して行・列数を設定する
投稿または固定ページの編集画面を開き、ブロック追加ボタン（「＋」マーク）をクリックします。検索欄に「テーブル」と入力するか、一覧から「テーブル」を選択してください。
ブロックを追加すると「カラム数」と「行数」の入力欄が表示されます。作りたい表の列数・行数を入力して「表を作成」ボタンを押すと、編集可能な表が挿入されます。なお、行数・列数はあとから追加・削除できるので、大まかな数で始めて問題ありません。
ステップ2：テキストを入力し、ヘッダー行・フッター行をオンにする
各セルをクリックしてテキストを入力します。表の意味を伝えるうえで重要なのが、見出し行（ヘッダー）の設定です。
テーブルブロックを選択した状態で、画面右側の「設定」パネルを確認してください。「ヘッダーセクション」のトグルをオンにすると、表の先頭行が見出し行として追加されます。この設定をオンにすることで、HTMLの <th> タグが自動的に出力され、検索エンジンや読み上げソフトが「この行は見出しである」と正しく認識できるようになります。フッターセクションも同様にトグルで追加できます。
ステップ3：文字色・背景色・スタイルを整える
テーブルブロックには、2種類のスタイルが用意されています。右側パネル上部の「スタイル」から選択できます。
- デフォルト：セルに枠線があるシンプルなスタイル
- ストライプ：1行おきに背景色が切り替わるスタイル
個別のセルに色を付けたい場合は、対象のセルを選択した状態でツールバーの「テキスト色」「背景色」から設定します。色の選択肢はサイトのテーマカラーに合わせて使うのがおすすめです。
ステップ4：セル幅を固定して列の幅を揃える
何も設定しない状態では、列の幅はセル内のテキスト量によって自動調整されます。幅を均等に揃えたい場合は、右側パネルの「固定幅のテーブルセル」をオンにしましょう。
このオプションをオンにすると、列幅が均等に固定されます。特定の列だけ幅を変えたい場合は、カスタムHTML編集で width 属性や CSS を追加することで対応できます。
標準テーブルブロックでできること・できないこと
標準テーブルブロックは手軽に使える反面、できることに限りがあります。プラグインが必要かどうかの判断に直結する内容なので、事前に把握しておきましょう。
できること
標準テーブルブロックでカバーできる操作は以下のとおりです。
- 行・列の追加・削除
- ヘッダー行・フッター行の設定
- テキストの色・背景色の変更
- スタイルの切り替え（デフォルト／ストライプ）
- セル幅の均等固定
- セル内への画像・リンクの挿入
- 文字のサイズ・フォントの調整
料金表・仕様一覧・簡単な比較表など、列数が少なく静的な表であれば、プラグインなしで十分対応できるでしょう。
できないこと
一方、以下の3点は標準テーブルブロックでは対応が難しい場面があります。
- セル結合をボタン操作で行うことができない
WordPress 6.2以降では、HTMLを直接編集することでセル結合に対応することは可能です。ただし、設定パネルからクリックひとつで直感的に結合する機能は用意されていません。マウス操作だけでセル結合をしたい場合は、プラグインの導入がおすすめです。 - スマホでの表示が自動で最適化されない
列数が多い表をスマホで表示すると、横にはみ出して崩れてしまうことがあります。標準テーブルブロックにはスマホ表示を自動で整える機能がないため、CSSの追加記述やプラグインで別途対応する必要があります。レスポンシブ対応の具体的な方法は後述します。 - Excel・CSVからのインポートができない
既存のExcelファイルやCSVをWordPressに取り込む機能は、標準テーブルブロックには搭載されていません。スプレッドシートで管理しているデータを表示したい場合は、インポート機能を持つプラグインの利用を検討してください。
目的別！WordPressテーブルプラグイン比較
標準テーブルブロックの限界を超えたい場合は、プラグインの導入を検討しましょう。ただし、プラグインは種類が多く、機能も価格もさまざまです。このセクションでは「どんな表を作りたいか」という目的ごとに、おすすめのプラグインを紹介します。
プラグインの選び方
プラグインを選ぶ際は、次の3つの軸で考えると迷いにくくなります。
- 編集のしやすさ重視：ブロックエディタ上でセル結合や装飾を直感的に操作したい
- データ管理重視：ExcelやCSVからデータを取り込んで一元管理したい
- UI表現重視：ボタン・評価アイコン・画像を組み込んだ比較表・料金表を作りたい
この3軸をもとに、代表的な4つのプラグインを紹介します。
セル結合・装飾を重視するなら「Flexible Table Block」
Flexible Table Blockは、ブロックエディタ上でセル結合・スタイル設定・モバイル向けの縦積み表示を操作できる無料プラグインです。管理画面の別ページに移動せず、記事の編集画面そのままで表を整えられるのが最大の特徴といえます。
WordPressのバージョン6.9以上、PHP 8.0以上が必要なため、導入前にサーバー環境を確認してください。有効インストール数は40,000以上で、アクセシビリティ改善の更新履歴もあり、継続的にメンテナンスされているプラグインです。
Excel・CSV管理や大量データなら「TablePress」
TablePressはWordPressのテーブルプラグインの中で最も普及しており、有効インストール数は700,000以上を誇ります。CSV・Excel・HTML・JSONからのインポートに対応しており、スプレッドシートで管理しているデータをそのままWordPressに取り込める点が強みです。
無料版でも検索・ソート・ページネーション機能（DataTablesと呼ばれるインタラクティブ機能）を利用できます。ただし、スマホ向けのレスポンシブ対応はPro（年間89ドル）以上のプランで提供される機能です。すべての表に検索・ソートを設定すると表示が重くなりやすいため、必要な表だけに有効化するのが運用のコツです。
比較表・料金表のUI表現にこだわるなら「WP Table Builder」
WP Table Builderは、ボタン・星評価・画像などをセルに組み込めるビジュアルビルダー型のプラグインです。「おすすめ」バッジや価格の強調表示など、販促向けの見せ方を手軽に実現できます。無料版でも基本的なUI表現に対応しており、Proプランへのアップグレードで検索・ページネーション機能を追加できます。
なお、過去にXSS（クロスサイトスクリプティング）などの脆弱性修正が公開された経緯があるため、プラグインを常に最新の状態に保つ運用が前提となります。
Google Sheets連携や検索・フィルタを重視するなら「Ninja Tables」
Ninja Tablesは、Googleスプレッドシートとのリアルタイム連携・検索・フィルタ・ページネーションを強みとするプラグインです。頻繁に更新が発生するデータ（店舗一覧・商品カタログ・スタッフ一覧など）を管理する用途に向いています。
有料プラン（Proは年間63ドルから）が前提となる機能が多いため、無料版で試してから判断するとよいでしょう。
どれを選べばいいか迷ったら
4つのプラグインの中で、最初の1本としておすすめなのはFlexible Table Blockです。無料で使えて、ブロックエディタから離れずに操作が完結するため、WordPressの操作に慣れていない方でも取り組みやすい選択肢といえます。Excelやスプレッドシートでデータを管理している場合はTablePressを、販促向けの比較表・料金表を作りたい場合はWP Table Builderを検討してみてください。
スマホで崩れない！レスポンシブ対応の実装方法
列数が多い表をスマホで表示すると、文字が潰れたり横にはみ出したりして読みにくくなることがあります。Googleはモバイル版のページを優先してインデックスする仕組みを採用しているため、スマホで表が崩れている状態はSEO面でも不利になりかねません。ここでは実務でよく使われる3つの対応方法を紹介します。
方法1：CSSで横スクロールを設定する
最も手軽で壊れにくいのが、表をスクロール可能なコンテナで囲む方法です。表の見た目を変えずにスマホで横スクロールできるようにできるため、数値の一覧や仕様表など「横方向のつながりで意味が成立する表」に向いています。
カスタムHTMLブロックやテーマのCSSに、以下のコードを追加してください。
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll table {
min-width: 600px;
}表を <div class=”table-scroll”> で囲むことで、スマホでは横にスクロールして全体を確認できるようになります。min-width の値は列数や内容量に合わせて調整してください。
方法2：縦積み表示でスマホ表示を最適化する
料金プランの比較表や機能一覧など、スマホでのコンバージョンを重視するページでは、各行をカード型に縦並びで表示する「縦積み」が有効です。横スクロールと違い、スマホ画面に収まる形でコンテンツを読み進めてもらえるため、離脱を減らしやすくなります。
CSSで実装する場合、メディアクエリを使ってスマホ幅のときだけ各セルを縦方向に並べ直す方法が一般的です。実装の難易度はやや高めなため、デザインや構造が複雑な表の場合は、後述のプラグインを使う方法も検討してみてください。
方法3：プラグインのレスポンシブ機能を使う
プラグインのレスポンシブ機能を使えば、CSSを書かずに設定画面から対応できます。各プラグインの対応状況は以下のとおりです。
- Flexible Table Block：ブレイクポイント（表示が切り替わるスマホ幅）の指定と縦積み表示を設定画面から操作できます
- TablePress：レスポンシブ対応はPro（年間89ドル）以上のプランで利用可能です。無料版では別途CSSでの対応が必要になります
- Ninja Tables：レスポンシブ設定と列の表示・非表示の切り替えに対応しています
CSSの記述が難しいと感じる場合は、Flexible Table Blockを使うのが最もハードルの低い選択肢です。無料で使えて、設定画面から視覚的にレスポンシブの挙動を調整できます。
SEOとアクセシビリティを高める表の書き方
表の内容が正しく作れていても、HTMLの構造が不適切だと検索エンジンや読み上げソフトに正しく伝わりません。このセクションでは、SEOとアクセシビリティ（アクセシビリティとは、障害のある方を含むすべてのユーザーが情報にアクセスしやすい状態を指します）の両方に効く表の書き方を解説します。
表を画像にしてはいけない理由
WordPressで表を作る際、スクリーンショットや画像ファイルとして貼り付けてしまうケースがあります。見た目は問題なくても、次の3点で大きなデメリットがあります。
- スクリーンリーダーが読み上げられない：視覚に障害のあるユーザーが利用する読み上げソフト（スクリーンリーダー）は、画像の中のテキストを認識できません。alt属性で補足する方法もありますが、表全体の構造を伝えるには限界があります
- テキスト検索に引っかからない：Googleは画像内のテキストをHTMLテキストほど正確に解析できません。表の内容がキーワードとして評価されにくくなるため、SEO上の機会損失につながります
- ページが重くなりやすい：画像ファイルはHTMLテキストより容量が大きくなりがちです。Core Web Vitals（Googleがページ体験の評価に用いる指標群）のスコアにも影響しかねません
HTMLのテーブルブロックで作成した表であれば、これら3つの問題をまとめて回避できます。
captionとth・scopeで表の意味を正確に伝える
HTMLテーブルには、検索エンジンと読み上げソフトの両方に「表の意味」を伝えるための属性が用意されています。WordPressのテーブルブロックでも意識しておきたい要素を3つ紹介します。
captionで表全体のタイトルを示す
<caption> タグは表のタイトルに相当する要素で、「この表は何を示しているか」を一言で伝える役割を持ちます。テーブルブロックには現時点でcaptionを直接設定するUI（操作画面）はないため、カスタムHTMLブロックを使うか、テーマのCSS・JS経由で追加する方法が現実的です。
ヘッダーセルにth・scope属性を使う
データセルの <td> に対し、見出しセルには <th> タグを使います。さらに scope=”col”（列の見出し）や scope=”row”（行の見出し）を付けることで、読み上げソフトがどのデータがどの見出しに対応するかを正確に把握できるようになります。
ロリポップでWordPressを利用している場合、テーブルブロックの「ヘッダーセクション」をオンにするだけで <th> タグが自動的に出力されます。難しいコードを書かなくても、基本的なアクセシビリティ対応の第一歩を踏めるのはブロックエディタの利点といえるでしょう。
よくある質問
標準テーブルブロックとプラグインはどちらを使うべきですか？
表の更新頻度・データ量・セル結合の要否で判断するのがおすすめです。料金表や仕様一覧など、列数が少なく更新頻度も低い静的な表であれば、標準テーブルブロックで十分対応できます。セル結合・Excelからのインポート・レスポンシブ対応の自動化が必要になった段階で、プラグインの導入を検討してみてください。
TablePressの無料版と有料版の違いは何ですか？
無料版でもCSV・Excelのインポート、検索・ソート・ページネーションなどのインタラクティブ機能を利用できます。スマホ向けのレスポンシブ対応はPro（年間89ドル）以上のプランで提供される機能です。Googleスプレッドシートとのリアルタイム同期や条件付き書式なども有料機能となるため、必要な機能を事前に確認してからプランを選ぶとよいでしょう。
テーブルブロックでセル結合はできますか？
WordPress 6.2以降では、HTMLを直接編集することでセル結合に対応できます。ただし、ボタン操作で直感的にセルを結合する機能は標準では用意されていません。マウス操作だけでセル結合を行いたい場合は、「Flexible Table Block」プラグインの導入がおすすめです。
プラグインを入れると表示が重くなりますか？
検索・ソートなどのインタラクティブ機能を全表に有効化すると、JavaScriptが増えてページが重くなる場合があります。TablePressはテーブルごとに機能をオン・オフできる設計になっているため、必要な表だけに絞って有効化するのが運用のポイントです。シンプルな静的表であればプラグインを使っても速度への影響は軽微です。
ロリポップでWordPressを使っていますが、プラグインは入れられますか？
問題なく利用できます。ロリポップではPHP 8.0以上に対応しているため、本記事で紹介したプラグインの動作要件を満たしています。プラグインのインストールはWordPress管理画面の「プラグイン」→「新規追加」からプラグイン名を検索するだけで完了します。
まとめ
WordPressで表を作る方法は、目的によって「標準テーブルブロック」と「プラグイン」に使い分けるのがベストです。列数が少なく更新頻度が低い静的な表は標準ブロックで十分対応でき、セル結合・Excelインポート・レスポンシブ自動化が必要になったときにプラグインを検討する、という順番で進めると無駄がありません。
スマホ表示の最適化とHTMLの構造化（th・scope・caption）は、ユーザー体験とSEOの両方に直結する要素です。表の見た目を整えるのと同じタイミングで、ぜひ取り組んでみてください。
まずは標準テーブルブロックで表を1つ作るところから始めてみましょう。物足りなさを感じた時点でプラグインを追加するのが、失敗の少ない進め方です。
