WordPress表（テーブル）完全ガイド！おすすめプラグイン、カスタマイズなど徹底解説！

2025年8月15日

「記事内に表を入れると見やすいって聞くけど、どうやって作るの……？」
「コードを書くのは難しそうで手が出せない！」
「プラグインで簡単にできるなら、どれを選べばいいか知りたい……」
「スマホ表示が崩れないか不安で、実際の見え方もチェックしたい」

そんな疑問やお悩みを抱えるあなたへ──

この記事では、WordPressで表（テーブル）を作成・カスタマイズする方法を、初心者にもわかりやすくステップごとに解説します。

プラグインの導入方法からデザイン調整、スマホ対応のコツまでを網羅した、完全ガイドです。

ブロックエディターの標準機能でサクッと表を作りたい
ExcelやGoogleスプレッドシートから手軽に貼り付けたい
もっと自由にデザインやカラーを変えたい
レスポンシブ表示やパフォーマンスにも配慮したい

あらゆるシーンで活用できる「表」のノウハウをまとめました。

この記事を読めば、あなたのサイトは一気にプロ仕様の見やすいレイアウトに生まれ変わります✨

表の基本的な作り方

WordPressで記事内に表（テーブル）を挿入する基本手順を2つの方法でご紹介します。

初心者でも迷わないよう、画面イメージを思い浮かべながら読み進めてみてください😊

ブロックエディターのテーブル機能を使う

投稿画面を開く
- WordPress管理画面から「投稿」→「新規追加」または既存記事の「編集」をクリック。
テーブルブロックを追加
- エディターの［＋］アイコンを押し、検索ボックスに「テーブル」と入力。
- 「テーブル」ブロックを選択すると、行数・列数を指定できる入力欄が表示されるので、必要な行列数を設定します。
セルに内容を入力
- 表示されたマス目に直接テキストを入力。
- Tabキーで次のセルへ移動、Shift＋Tabで前のセルに戻れます。
スタイルと配置を調整
- ブロックの右サイドバーで以下を変更可能：
  - スタイル：デフォルト or ストライプ
  - 行見出し：ヘッダー行の有無
  - 位置：左寄せ・中央寄せ・右寄せ
- マウスでセルの枠をドラッグすれば、列幅や行高も調整できます。

💡 ポイント表

スクロールできます

操作	やること
ブロック追加	［＋］→「テーブル」を選択
行列数の指定	初期入力画面で行×列を決定
セル移動	Tab / Shift＋Tab
スタイル変更	ブロック設定サイドバーで選択
幅・高さの調整	セル枠をドラッグ

外部ソフト（Excel／Googleスプレッドシート）から貼り付ける

表を準備する
- ExcelやGoogleスプレッドシートで、記事に載せたい表を作成しておきます。
コピーする
- 外部ソフト上で表全体を選択し、Ctrl+C（⌘+C）でコピー。
WordPressに貼り付け
- エディター上でカーソルを置き、Ctrl+V（⌘+V）で貼り付け。
- 自動的にテーブルブロックとして認識され、同じように行列が再現されます。
微調整を行う
- 文字サイズやセル幅が崩れる場合は、前節の「スタイルと配置を調整」を利用。
- 必要に応じて見出し行を設定し、セルの結合（マージ）を使って複数セルをまとめることも可能です。

🎉 こんなときにおすすめ

大量のデータを一度に貼りたい
外部で集計・編集した表をそのまま活用したい

プラグインを利用した表の導入

WordPressでより高度な表機能を素早く実装したいときは、プラグインが強力です。

ここではTablePressとFlexible Table Blockの2つを取り上げ、それぞれの手順と特徴をご紹介します😊

TablePressによる動的テーブルの作成手順

プラグインのインストールと有効化

管理画面の「プラグイン」→「新規追加」をクリック
検索ボックスに TablePress と入力し、「今すぐインストール」→「有効化」を選択
サイドメニューに TablePress が追加されていれば完了！

ヒント：公式アイコンが表示されているか確認しましょう✅

表データの入力・設定方法

TablePress → 新規追加 をクリック
テーブル名・説明・行数・列数を入力して「テーブルを追加」
表エディターでセルに直接入力
必要に応じて「Import」タブからCSVやExcelをアップロード
下部の設定オプションで ヘッダー行／フッター行 の有無を切り替え

スクロールできます

操作	ポイント
新規テーブル作成	名前とサイズは後からでも変更可能
セルの編集	ダブルクリックで入力、右クリックで行・列を追加・削除
データのインポート	フォーマットはCSV／XLSXに対応
ヘッダー・フッター設定	チェックボックスで簡単ON/OFF

ショートコードで記事内に埋め込む方法

作成済みテーブル一覧から対象テーブルを確認
表の右側に表示されるショートコード（例：[table id=1 /]）をコピー
投稿編集画面で ショートコードブロック を挿入し、貼り付け
プレビューで表示をチェックして完了🎉

Flexible Table Blockで高速構築

プラグイン導入からテーブル挿入までの流れ

「プラグイン」→「新規追加」で Flexible Table Block を検索・インストール・有効化
投稿／固定ページの編集画面で［＋］ボタンを押し、Flexible Table ブロックを選択
表示されたマス目で行数・列数を指定
各セルに入力しながら、ドラッグで列幅や行高を即座に調整

メリット：エディター上で直感的に編集でき、余計な画面遷移なしでサクサク作業できます⚡

レスポンシブ対応やスプレッドシート連携機能

レスポンシブ設定
- ブロック設定パネルで「モバイル時に横スクロールを許可」をONに
- 自動で最適な表示幅に調整されます🔄
スプレッドシート連携
1. Googleスプレッドシートの共有リンクをコピー
2. Flexible Tableの「データソース」欄にURLを貼り付け
3. リアルタイムで外部データを反映できるので、更新も簡単！🌐

スクロールできます

機能	説明
レスポンシブ表示	モバイルでも横スクロールで表全体を閲覧可能
スプレッドシート連携	Google Sheetsの変更を投稿に自動反映
ドラッグによるサイズ調整	ブロック上でセル境界をドラッグして幅・高さを調整

表をカスタマイズするテクニック

WordPressに挿入した表をより魅力的＆見やすく仕上げるためのコツを、デザイン・色使い・レイアウト・画像挿入の4つの観点で解説します😊

デザインの調整

テーブル全体のスタイル切り替え（デフォルト／ストライプ等）

ブロックエディター
1. 表ブロックを選択
2. サイドバーの「スタイル」から デフォルト／ストライプ をクリック
3. リアルタイムで見た目が切り替わる
TablePress
1. テーブル編集画面の「表示オプション」
2. CSSクラス（例：stripe）を追加
3. テーマ側のスタイルと組み合わせて、様々な柄を適用可能✨

スクロールできます

方法	メリット	注意点
デフォルト	シンプルで記事に馴染みやすい	長い表だと行の区切りが見えにくいことがある
ストライプ	偶数行／奇数行が交互に色分けされ可読性UP	背景色のコントラストを弱めすぎると、効果が薄くなる

枠線の太さ・カラーを設定する

ブロック設定
- サイドバーの「枠線」メニューで 太さ（px指定） を入力
- カラー選択ツールで好きな色を直感的に変更
カスタムCSS

  .wp-block-table td {
    border: 2px solid #3498db;
  }

上記を「外観＞カスタマイズ＞追加CSS」に貼り付けるだけで、表全体の枠線をブルーに統一できます🎨

色・文字装飾

文字色の変更方法

セルを選択 → サイドバーの「文字色」パネル
見出し行だけ色を変えたい場合
1. 見出し行を選択
2. 「テキスト」カラーを指定
3. 重要なキーワードを 太字（Ctrl+B） にすると、さらに強調できます💪

背景色やセルの塗りつぶし

ブロックエディター
- 「背景色」オプションでセルごとに色を設定
- 例えば、重要なデータを黄色でハイライトすると注目度アップ⚡
TablePress
- “Cell Options” からセルごとに背景色を設定可能
- 条件付き書式を使えば、自動で色分けもできる（Pro版機能）

レイアウト調整

セル幅を固定／可変に設定

固定にする
- 表ブロック設定で「列幅を固定」をON
- 内容量にかかわらず、一定の幅で表示される
可変にする
- 固定をOFFにすると、セル内テキストが自動で折り返され、レスポンシブ対応しやすい📱

列・行の追加／削除

ブロックエディター
- セルを右クリック → 「行を追加」「列を追加」を選択
- 同様に「削除」オプションも同じメニューにまとまっていて分かりやすい
TablePress
- 編集画面下部の「行追加」「列追加」ボタンで一括操作

左寄せ・中央揃え・右寄せへの切り替え

ブロックツールバー
- セル選択時のツールバーで 左寄せ／中央揃え／右寄せ のアイコンをクリック
- 数字や金額には中央揃え、テキスト説明には左寄せがおすすめ👍

画像や見出しの挿入

セル内に画像を配置する

ドラッグ＆ドロップ
1. メディアライブラリから画像をドラッグ
2. 直接セル内にドロップすると、自動で縮小表示されます
メディア挿入ボタン
- セル内で［＋］→「画像」を選択し、アップロード or ライブラリから配置

ヘッダー／フッター行を活用する

ヘッダー行
- 列の見出しをまとめて強調表示できる
- テーブル設定で「ヘッダー行を有効化」にチェック
フッター行
- 合計や備考などを目立たせたいときに使う
- ブロックエディター／TablePressどちらにもオプションあり📝

以上のテクニックを組み合わせると、表の可読性とデザイン性が大幅にアップします！

ぜひ試してみてください✨

さらに高度な応用

基本のカスタマイズができたら、次はよりプロフェッショナルな表を目指しましょう。

ここではCSSによる独自デザインやスマホでの横スクロール対応、そして有料プラグインの活用例をご紹介します✨

CSSを使った独自スタイルの実装

WordPressの標準機能だけでは難しい細かい装飾は、カスタムCSSで自由自在に設定できます。

/* テーブル全体に影をつけて立体感アップ */
.my-custom-table {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-collapse: separate;
  border-spacing: 0;
}

/* ヘッダー行をグラデーションに */
.my-custom-table thead th {
  background: linear-gradient(90deg, #ff9a9e, #fad0c4);
  color: #333;
}

/* 偶数行だけ薄い背景色に */
.my-custom-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* セルのパディングを広めにしてゆとりを */
.my-custom-table td, .my-custom-table th {
  padding: 12px 16px;
}

「外観」→「カスタマイズ」→「追加CSS」に貼り付け
表ブロックまたはTablePressでCSSクラスに my-custom-table を付与
プレビューでデザインを確認し、必要に応じて色やサイズを調整しましょう👍

横スクロール対応でスマホ表示を改善

スマホでは幅の広い表がはみ出して見づらくなることがあります。

以下の方法で横スクロールを有効化しましょう。

<div class="table-responsive">
  <!-- 通常のテーブルHTML -->
  <table class="wp-block-table">
    …
  </table>
</div>

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table {
  width: 100%;
  min-width: 600px; /* 必要に応じて調整 */
}

ポイント
- .table-responsive の overflow-x: auto で横方向のスクロールが可能に
- スマホでもスムーズに操作できるよう、 -webkit-overflow-scrolling: touch を追加
- min-width で必要最低限の横幅を確保し、行が潰れないようにする

📱 スマホ表示チェックの流れ

スクロールできます

手順	やること
レスポンシブ設定	CSSを追加して横スクロールを有効化
最低幅の確認	`min-width` を設定
実機プレビュー	実際のスマホでスクロール操作をテスト

価格表などの有料プラグイン活用例

料金プランや比較表など、専門性の高い表を作るには有料プラグインも検討しましょう。

豊富なテンプレートや機能で短時間＆高品質を実現できます✨

スクロールできます

プラグイン名	主な特徴	価格帯（年額）
Go Pricing	多彩なプリセット、レスポンシブデザイン対応	約$30～$50
WP Table Builder Pro	ドラッグ＆ドロップで簡単に価格表作成	約$39～$79
Ninja Tables Pro	条件付き書式、フィルター機能、エクスポート対応	約$49～$99

選び方のポイント
1. デザインテンプレートの豊富さ → カスタマイズ時間を短縮
2. モバイル対応レベル → 訪問者の使用端末を考慮
3. サポート体制 → トラブル発生時の安心感

💡 有料プラグインは定期的なアップデートで新機能が追加されるので、サイトの表現力を長期的に向上させたい方におすすめです！

表を挿入する際の注意ポイント

表を掲載すると情報が整理されますが、読者の使いやすさを損なわないためのチェックと工夫が欠かせません。

ここでは主に「レスポンシブ表示」と「読みやすさ」に注目しましょう😊

レスポンシブ表示のチェック方法

プレビュー機能でPC・スマホ両方を確認

PC表示プレビュー
- 投稿画面で［プレビュー］→［新しいタブでプレビュー］をクリック
- 広い画面で表の全体像と横幅あふれがないか確認
スマホ表示プレビュー
- 同じプレビューページの上部にあるデバイス切替アイコン（PC/タブレット/スマホ）から「スマホ」を選択
- 表が画面幅に収まっているか、または横スクロールがスムーズに動くかをチェック
実機確認
- 実際のスマホ・タブレットでページを開き、スクロールやタップ操作に問題がないか試す

💡 チェックポイントまとめ

スクロールできます

確認項目	理想の状態
全体表示	横スクロールなしで見切れなし
スクロール操作	スムーズに横スクロールできる
レイアウト崩れ	セル内テキストが折り返され適切に配置

読みやすさを保つ工夫

適切な改行と文字サイズの調整

セル内改行
- 長文はセル内で見やすい箇所に手動で改行を入れると、読者がスキャンしやすくなります✂️
文字サイズの最適化
- 小さすぎず大きすぎないサイズ（例：16px前後）を設定
- 見出し行はやや大きめ、データ行は標準サイズにするなど、メリハリをつけると効果的
強調と間隔
- 重要な数字やキーワードは太字にして目立たせる
- セルのパディング（余白）を広めに取ると、詰まり感が軽減されます

🎯 読みやすさのポイント

スクロールできます

テクニック	効果
手動改行	情報を小分けにして視認性アップ
文字サイズ調整	読み疲れを軽減
太字強調	重要部分がひと目でわかる
セル余白（パディング）	情報が詰まりすぎず、ゆとりを演出

これらの注意ポイントを押さえることで、どんなデバイスでも快適に読める表を作成できます。

ぜひプレビューと実機確認を習慣にして、読者ファーストの記事を目指しましょう✨

まとめ

この記事では、WordPressにおける表の作り方とカスタマイズ手順を体系的にご紹介しました。

基本機能／コピー貼り付け／プラグインでの多彩な導入方法
デザイン調整・色付け・レイアウト変更による見た目のブラッシュアップ
CSSカスタマイズやスマホ横スクロール対応で使い勝手を向上
有料プラグインを活用した価格表・比較表の作成例

これらを組み合わせれば、初心者でも短時間で効果的なテーブルを作成できます。

ぜひ本ガイドを参考に、あなたの記事に最適な表を導入し、読者にとって見やすく、理解しやすいコンテンツを提供してください。

WordPress表（テーブル）完全ガイド！おすすめプラグイン、カスタマイズなど徹底解説！

表の基本的な作り方

ブロックエディターのテーブル機能を使う

外部ソフト（Excel／Googleスプレッドシート）から貼り付ける

プラグインを利用した表の導入

TablePressによる動的テーブルの作成手順

プラグインのインストールと有効化

表データの入力・設定方法

ショートコードで記事内に埋め込む方法

Flexible Table Blockで高速構築

プラグイン導入からテーブル挿入までの流れ

レスポンシブ対応やスプレッドシート連携機能

表をカスタマイズするテクニック

デザインの調整

テーブル全体のスタイル切り替え（デフォルト／ストライプ 等）

枠線の太さ・カラーを設定する

色・文字装飾

文字色の変更方法

背景色やセルの塗りつぶし

レイアウト調整

セル幅を固定／可変に設定

列・行の追加／削除

左寄せ・中央揃え・右寄せへの切り替え

画像や見出しの挿入

セル内に画像を配置する

ヘッダー／フッター行を活用する

さらに高度な応用

CSSを使った独自スタイルの実装

横スクロール対応でスマホ表示を改善

価格表などの有料プラグイン活用例

表を挿入する際の注意ポイント

レスポンシブ表示のチェック方法

プレビュー機能でPC・スマホ両方を確認

読みやすさを保つ工夫

適切な改行と文字サイズの調整

まとめ

関連記事

テーブル全体のスタイル切り替え（デフォルト／ストライプ等）