WordPressの投稿やページにテーブルを追加すると、データを整理し、読者が理解しやすくなります。WordPressでは、デフォルトのテーブルブロックでこれを非常に簡単に行えます。
WPBeginnerでは、最近、まとめ記事でトップ5または10のプラグインを表示するためにテーブルを使用し始めました。この簡単な変更により、読者からのエンゲージメントが向上しました。
最も良い点は、デフォルトのブロックに強力なスタイリングオプションが含まれており、テーブルを魅力的に見せることができることです。このガイドでは、WordPressでテーブルを簡単に作成および管理する方法を説明します。
テーブルの挿入の基本と、コーディングを知らなくてもソートや検索などの高度な機能でテーブルを改善する方法を学びます。
WordPressの投稿やページにテーブルを追加する理由
WordPress の投稿やページにテーブルを追加すると、情報を整理するのに役立ちます。コンテンツを簡単に消化できるチャンクに分割し、読者にとってより親しみやすいものにします。
比較チャート、リスト、または統計情報を表示している場合でも、テーブルはデータを提示するためのクリーンで構造化された方法を提供します。
さらに、テーブルは全体的なユーザーエクスペリエンスを向上させることができます。長い段落をスクロールする代わりに、読者は探している情報をすばやく見つけることができます。
これにより、コンテンツはクリーンでプロフェッショナルな外観になり、より魅力的になります。
とはいえ、WordPressの投稿やページに簡単にテーブルを追加する方法を見てみましょう。
WordPressブロックエディターでテーブルを作成する
WordPressでは、デフォルトのWordPressブロックエディターを使用して、テーブルを非常に簡単に追加できます。
新しい投稿またはページを作成するか、既存のものを編集します。コンテンツエディターに入ったら、「+」記号をクリックして新しいブロックを追加し、テーブルブロックを選択します。
「Text」セクションの下にあります。または、検索バーに「Table」と入力することもできます。
次に、テーブルに必要な列数と行数を入力するように求められます。両方の数値はデフォルトで2になっています。
正確な数について100％確信がなくても心配しないでください。テーブル列や行は後でいつでも追加/削除できます。
行数と列数を入力し、「テーブルを作成」ボタンをクリックするだけです。
ブロックはテーブルを生成し、画面に表示します。
テーブルセルにテキストを入力でき、各セル内のコンテンツ量に基づいて自動的にサイズが変更されます。
セルを固定幅にしたい場合は、右側でこのオプションを設定できます。ここで、テーブルのヘッダーまたはフッターセクションを追加することもできます。
テーブルヘッダーを使用することは、アクセシビリティのために強く推奨されます。なぜなら、視覚障害のあるユーザーのために、スクリーンリーダーがテーブルデータを正しく解釈するのに役立つからです。
設定パネルから、スタイルタブに切り替えることもできます。
あなたのWordPressテーマは、テーブルブロックのさまざまなスタイルを提供している場合があります。または、背景色とテキスト色を選択することもできます。
新しい行または列を追加したい場合は、追加したいテーブル内のセルをクリックしてください。次に、「テーブルの編集」ボタン（鉛筆アイコンが付いた小さなテーブルのようなアイコン）をクリックします。
これにより、テーブルに行や列を追加または削除するためのいくつかのオプションが表示されます。
デフォルトでは、テーブルの列のテキストは左揃えになっています。
列内をクリックしてから「列の配置を変更」ボタンをクリックすることで、これを変更できます。
また、投稿またはページ内のテーブル全体の配置を変更することもできます。
「配置を変更」ボタンをクリックして、リストからオプションを選択するだけです。
これらのオプションにより、テーブルが投稿エリアの通常の境界を超えて表示される可能性があることに注意してください。
いくつかのテーブルは、WordPressウェブサイトでは奇妙に見える場合がありますので、テーブルがどのように表示されるかを確認するために、投稿またはページをプレビューしてください。
デモサイトに表示されるテーブルを「ワイド幅」に設定した例を以下に示します。
ご覧のとおり、投稿エリアの左右のマージンを超えて伸びています。
Gutenbergエディターに組み込まれているテーブルツールは、テーブルの表示に大きな柔軟性をもたらします。Tableブロックを使用して、データを読者にとってわかりやすい形式で表示できます。
ただし、このブロックには検索フィルタリング、カスタムソートなどの高度な機能はありません。
また、サイドバーウィジェットや他のページなど、WordPressサイトの複数の領域で同じテーブルを効率的に使用することもできません。
高度なテーブルを作成するには、WordPressのテーブルプラグインを使用する必要があります。
TablePressプラグインを使用したテーブルの作成
TablePress は、市場にある 最高のWordPressテーブルプラグイン の1つです。コアプラグインは100%無料で、テーブルを簡単に作成・管理できます。追加機能のためのプレミアム拡張機能も利用可能です。
テーブル機能がない古いクラシックWordPressエディターを使用している場合は、TablePressが投稿やページにテーブルを追加する最良の方法となります。
まず、TablePress プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
その後、WordPressダッシュボードにTablePressメニュー項目が表示されます。新しいテーブルを作成するには、TablePress » 新規追加に移動してください。
テーブルの名前を入力し、行数と列数を決定する必要があります。後でテーブルの行や列を追加/削除することもできます。
テーブル名、行、列を追加したら、「テーブルを追加」ボタンをクリックしてテーブルを作成してください。
次に、テーブルの情報が表示され、コンテンツを追加できる領域が表示されます。
テーブルのセルに、入力したいデータを単純に入力してください。
行や列を追加または削除したり、並べ替え操作を実行したりするには、テーブル内を右クリックするだけです。オプションメニューが表示され、さらに変更を加えることができます。
「テーブル操作」などの高度なオプションは、「テーブルコンテンツ」エリアの下にあります。
ここから、行を追加、削除、複製できます。
「テーブルオプション」では、ヘッダー行やフッター行を追加できます。これらはデータと一緒にソートされません。
テーブル名と説明を表示する場所も決定できます。
最後に、「サイト訪問者向けテーブル機能」セクションでさまざまなオプションを設定できます。
これらの設定により、読者がフィルター、検索、並べ替えできるレスポンシブテーブルを作成できます。
テーブルに満足したら、「変更を保存」をクリックするだけです。
その後、Tableのショートコードをコピーします。次のステップで必要になります。
💡プロのヒント: ショートコードを使用する最大の利点の1つは、同じテーブルを複数の投稿、ページ、またはサイドバーウィジェットに配置できることです。
テーブルを更新する必要がある場合は、1か所を編集するだけで、ショートコードが使用されているすべての場所に自動的に変更が表示されます。これにより、多くの時間を節約できます！
次に、テーブルを表示したい投稿またはページを編集し、エディターにショートコードブロックを追加します。
その後、先ほどコピーしたショートコードをショートコードブロックに追加します。
変更を更新または保存することを忘れないでください。
一方、クラシックエディターを使用している場合は、投稿に直接ショートコードを追加するだけです。
将来的にテーブルを変更したい場合は、ダッシュボードのTablePressに戻って変更できます。テーブルは、使用したすべての投稿やページで自動的に更新されます。
TablePressでは、スプレッドシートやCSVファイルからデータをインポートすることもできます。同様に、TablePressテーブルデータをCSVファイルにエクスポートすることもできます。これは、Microsoft ExcelやGoogle Sheetsなどの任意の表計算プログラムで開くことができます。
動画チュートリアル
文章での説明よりも動画での説明がお好みであれば、こちらのビデオチュートリアルをご覧ください。
WordPressテーブルに関するよくある質問
WordPressウェブサイトにテーブルを追加することについて、よく寄せられる質問を以下に示します。
WordPressでテーブルをレスポンシブにするにはどうすればよいですか？
デフォルトのWordPressテーブルブロックには、レスポンシブ設定が限定されています。モバイルデバイスで見栄えの良いテーブルには、TablePressのようなプラグインが最善の解決策です。
小さな画面で横スクロール可能なテーブルを作成できるため、サイトの使いやすさを維持するのに役立ちます。
テーブルの外観をカスタマイズできますか？
はい。組み込みのテーブルブロックには、背景色とテキスト色を変更するための基本的なスタイルオプションがあります。WordPress テーマも独自のスタイルを追加する場合があります。
より高度なデザイン制御のために、プラグインを使用すると、カスタムCSSでテーブルをカスタマイズする力がさらに増します。
ExcelまたはGoogleスプレッドシートからWordPressにデータをインポートするにはどうすればよいですか？
ExcelやGoogle Sheetsのようなスプレッドシートからデータをインポートする最も簡単な方法は、プラグインを使用することです。
TablePressには、CSVファイルを直接アップロードできる組み込みのインポート機能があります。これにより、手動でデータを入力するよりも大幅に時間を節約できます。
ソート可能で検索可能なテーブルを作成する最良の方法は何ですか？
デフォルトのWordPressテーブルブロックは、単純なデータ表示には適していますが、並べ替えや検索はサポートしていません。
これらのインタラクティブな機能を追加するには、プラグインが必要です。TablePressは、訪問者が列を並べ替えたり、テーブル内の特定の情報を検索したりできる優れた無料の選択肢です。
この記事が、HTMLを使用せずにWordPressの投稿やページにテーブルを追加する方法を学ぶのに役立ったことを願っています。また、WordPressで目次を作成する方法に関するガイドや、WordPressエディターで特定のユーザーからブロックを非表示にする方法のチュートリアルも役立つかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
ハリンドゥ・ペレラ
TablePressでグリッドラインを表示するにはどうすればいいですか？？？
Lorraine
本当にありがとう。これでとても明確になりました。
エリックはできますか
素晴らしい記事です。どうもありがとうございます。インストールも使用方法の理解も簡単でした。乾杯！
mangi khumakcham
良いテーブルプラグインですが、モバイルフレンドリーではありません。
テーブルの右側がモバイルビューで切り取られます。
Sany
こんにちは
動的なテーブルを作成する方法を誰か教えてもらえませんか？
WordPress初心者です。ガジェット（例えば電話）のデータベースを管理したいです。管理者として仕様とアイテムの写真を簡単に入力できるインターフェースが欲しいです。ユーザーはブランドでフィルタリングしたり、これらのガジェットを2つ以上テーブル形式で比較したりするオプションを持つべきです。また、アイテムをクエリしてすべての仕様をテーブル形式で見れるようにしたいです。これを簡単に管理する方法についてアドバイスをいただけますか？あるいは、すでに記事がありますか！？
ありがとう
Stephen Ainsworth
素晴らしい人々は使い方がわからない
そしてプラグインを使わなければなりません。ため息。
ノーマン・S・バラニアン
学んで得るのに良いことですね.. 良いブログです
これどうも！さて、どうすればいいですか…
他の読者の皆さん、私にあまり厳しくしないでください（特にRという言葉を使わないでください）。私はこのすべてに非常に新しく、最初のテーブルを作成することに成功したと感じています。さて、テーブルのテキストの外観を変更するにはどうすればよいですか？ページの下部にある資料へのリンクや、重要な部分を強調するために使用しています。
一人の男性
CSSを使用する必要があります。これには多少の学習曲線があります（この場合、テーブル、行、テーブルセル、テーブルセル内の段落、リンク、ホバー効果などをスタイル設定したい場合があります）。そのため、本当に重要な場合にのみ開始してください。
Tablepress - 警告
TablePress を使用して作成したテーブルを失いました。どのように削除されたのか分かりませんが、削除されたテーブルを復旧する方法がないことも分かりました。テーブルがどのように削除されたのか分からないため、TablePress に頼ることに不安を感じています。
WPBeginnerサポート
バックアッププラグインが導入されていれば、以前のバックアップを復元することでテーブルを復旧できます。
プラグインの問題ではないと考えています。
管理者
Lilli
Great! Great! Just what I was looking for! Thanks a million
デビッド
私だけですか、それともWordPressは遅いですか？つまり、最近のWYSIWYGエディターならテーブルをその場で作成できますが、最大のCMSはできないのですか？何か見落としているに違いありませんが、プラグインやiframeを使用するのは簡単なテーブルには手間がかかりすぎます…自分でコーディングします。
Vituz Andersen
デビッドさん、私も同感です。理解できません。1998年の最初のHTMLエディタにはテーブルがありました…なぜCMSベースのウェブサイトを作るのは簡単なのに、テーブルが作れないのでしょうか…ハローーーー！！
Mayur
Davidさん、こんにちは
WordPressで自分でコーディングしようと思いましたが、テーブルの書式設定がうまくいきませんでした。ページでHTMLを特定の使い方はありますか？
ありがとうございます
Sirje Koop Palmqvist
WordからWordPressにテーブルをコピーしましたが、コードはきれいで整っています。うまく機能します。今度はFooTableプラグインで同じテーブルをレスポンシブにするために試したいのですが、すでに何らかの形でレスポンシブになっています。ウェブデザイナーは素材をローカルコンピュータに保存しておくので、Wordで変更してWPのテーブルを置き換えることができると考えていました。これはずるいかもしれませんが、機能します。Sirje
Radu
TablePressは素晴らしいプラグインです。
この投稿をありがとうございます。
実は今日ダウンロードして、すでに彼らのチームに寄付しました。
皆さん、素晴らしい一日をお過ごしください。
Emily
FooTableと組み合わせてレスポンシブに対応させましょう。両者は互いにサポートしています。完璧です！
アーネスト
こんにちは、
テーブルの線が表示されないようにする方法はありますか？
ニール
このようなプラグインの問題は、プラグインを放棄すると、そのプラグインにリンクされたコンテンツがサイト全体で壊れてしまうことです。
非常に洗練されたプラグインですが、できるだけデータベースへの依存を最小限に抑えようとしています。
WPBeginnerサポート
Neal、その点については正しいです。しかし、TablePressはテーブルにカスタム投稿タイプを使用しています。これは、プラグインを無効にしてもテーブルがデータベースに保存されることを意味します。データは引き続きエクスポートできます。
管理者
グループ・オブ・オーシャンインフォ
こんにちは、WPbeginnerチーム様
同じ方法でスクリプトを呼び出すことは可能ですか？
例として、500個の異なる投稿に対して1000個の異なるスクリプトがあります。
各投稿で2つのテーブルを呼び出したいのですが、そのテーブルでテキストではなくスクリプトを実行したいのですが、テーブルで2つのスクリプトを呼び出すことは可能ですか？
ore
これをありがとうございます！クライアントがログインして売買したい商品の価格を投稿でき、それが一般に公開されたままになるテーブルを作成するには、どのようなリソースを使用できますか？
Balaji
プラグインを見つけるのに役立ててくれてありがとう。
Rátkai Tamás
フォームまたはページにテーブルを追加することに興味があります。ユーザーがページにアクセスした場合、セルに数量を追加でき、フォームの下部でテーブルを私に送信できます。
基本的には、支払いオプションのない非常にシンプルな注文ページになります。
うーん
プラグインを使わずにWordPressにいくつのテーブルを追加できますか？
Pierre
tablepressプラグインを使用してブログ記事にテーブルを挿入しようとしています。突然、各ページの左下隅に角括弧で囲まれた「Edit」という単語が表示されるようになりました。それを削除できません。どうすれば修正できますか？
ありがとうございます！
Pierre
Jennifer
プレス用ページを作成するのにまさに必要でした。最高です。
Allii Allee
シンプルなテーブルを追加したいのですが、追加方法を知っている人はいますか？
okemini otum
これは素晴らしいです、大変助かりました
Nouman Younas
素晴らしい…この記事を読んでインストールしました…モバイルプレビューに進むと問題が発生しています…様子を見ます。全体的に素晴らしいプラグインと記事です（Y）
サディ
あなたのような購読フォームを追加するにはどうすればよいですか??
ありがとう
アリシア・ラデス
すごい！このプラグインが大好きです。ありがとうございます！
Anil Anvesh
OK、プラグインをインストールして、ショートコードを使用してテーブルを投稿に追加しました。私の質問は、Googleはショートコードを読むのですか、それともテーブルの内容を読むのですか？SEOフレンドリーですか？このプラグインを使用した投稿へのリンクを教えてください。
アンドリュー
プラグインは気に入っていますが、列/行の幅/高さをカスタマイズする方法、または特定のセルをコンテンツのサイズに合わせる方法がわかりません。何か方法はありますか？ありがとうございます。
WPBeginnerサポート
はい、プラグインのダウンロードページにあるサポートページをご覧ください。
管理者
reGz
Combineセルで列を分割する方法は？
何かアイデアはありますか？
ありがとう
シルベスター
TablePressで入力されたデータはMySQLテーブルに保存されますか？
Simon
良い質問ですね、私も回答に興味があります。誰か知っていますか？確認してみます。
Arnel leo Aranquez
このプラグインをmysqlからデータを表示するために使用する方法はありますか？
WPBeginnerサポート
いいえ、その目的で書かれたとは考えていません。ただし、MySQLテーブルをCSVとしてエクスポートし、TablePressにインポートすることは可能です。
管理者
Lindberg
データベース内の任意のMySQLテーブルを表示できれば素晴らしいでしょう。これは簡単に修正でき、このプラグインの有用性を大幅に向上させることができるはずです
ヘレン・エドワーズ
テーブルの上部にある「XX件表示」と下部にある「1～6件中6件表示」を削除するにはどうすればよいですか？
Emily
実は、行とテーブルを追加すると表示されます。設定はそのすぐ下にあります。よく見てください。
Jaya
こんにちは。
特定のユーザーがコピーやファイルのインポートなどでテーブルを追加できるように、投稿セクションでTablePressフォームをどのように使用できますか？
使い方を教えてください。
よろしくお願いします。
敬具
Jaya
Bamboo
これは非常に時間を節約できます。ありがとうございます！
Amanda
これは素晴らしいプラグインです。質問が1つあります。テーブル内の情報をより大きく表示する必要があります。各セルに個別にコードを入力する以外に、何か方法がありますか？
編集スタッフ
そのためには、CSS を変更する必要があります。
管理者
Amy
それで、どのWordPressバージョン向けに書いていますか？WordPress.comですか、それともWordPress.orgですか？ダッシュボードでプラグインオプションが見つからないからです。これを指定すべきです…期待していたのに、今は手でコードを書くのに戻っています。
編集スタッフ
WPBeginnerのすべての記事は、セルフホスト型WordPress向けに書かれています
管理者
Jimi Mikusi
すごい。
私は簡単に感動しませんが、これはそれを成し遂げました。
プラグインを追加してからわずか数分で、私のサイトに視覚的に美しく、簡単にメンテナンスできるテーブルができました。
ありがとうございます！
編集スタッフ
Glad you got it to work
管理者
Eddu
Love this plugin.
Tried to style the table with Headway. No luck so far. Did someone else tried also? Would be great if it would be possible to do so.
Again, great plugin
編集
William Lower
これを見つけられて本当に良かったです！プログラミングの知識がない私は、コードでテーブルを作成するのに大変苦労していました。
Chrissy
これ、ありがとうございます！ウェブサイトで素晴らしい価格表をたくさん見ていて、解決策を探していました。TinyMCE プラグインを使っていますが、それは機能しますが、本当に必要としているものではありません。改めて、皆さんは最高です。
Vickie
投稿ありがとうございます！
ところで、セルにコードを追加することは可能でしょうか？ PayPalのコードをテーブルに追加したいのですが、最善の方法がわかりません。
ジェフ・コーハン
コードをセルに貼り付けるだけで試しましたか？
イヴォンヌ・フィン
この比較的使いやすいプラグインに本当に感謝しています。私は技術に詳しくないので、プラグインでできることに何時間も費やしたくないので、多くのフラストレーションから救われました。
テーブル作成用の他のプラグインもいくつか試しましたが、使いやすさの点では感心しませんでした。
大変感謝いたします！
Yvonne
Jon Mason
これは芸術作品です！うまくできており、レスポンシブでもあります！
M.Aswad Mehtab
この投稿は、HTMLやCSSが得意でない方にとって非常に役立ちます。ありがとうございます!!
デビッド
これは、私たちがいくつかのサイトで使用しているTables Reloadedのように見えます。しかし、これはより使いやすく管理しやすいように見えます。w3 total cacheのようなキャッシュプラグインとはどの程度うまく機能しますか？
編集スタッフ
これは、同じ開発者（Tobias）が手がけたWP Tables Reloadedプラグインの後継です。Tobiasは、次のバージョンがW3 Total Cacheと互換性があるというコメントもこの投稿に寄せています。
管理者
ジェフ・コーハン
全く同感です。TablePressはWordPressでテーブルを作成するための最高のプラグインです（私の意見ですが）。
追加する点がいくつかあります：
1) TablePressは、WordPressでテーブルを作成するための最良のプラグインであったWP-Table Reloaded（現在は廃止）の後継です。どちらも開発者Tobias Bathgeの作品です。
2) WP-Table Reloadedで作成されたテーブルはTablePressに移行できます。
3) Tobias氏のサポートは並外れたものです。私が初めてTablePressを2012年11月に使用したとき、HTMLインポート機能にバグがあり、WordPress.orgのサポートフォーラムで報告しました。1時間以内に、Tobias氏はGithubに修正を公開しました。しかし、私の言葉を鵜呑みにしないでください。サポートフォーラムを確認してください。
ジェフ・コーハン
キース・デイビス
みんな、ありがとう
これが私にとってのテーブルプラグインになるかもしれない。
以前は Dreamweaver でテーブルを作成し、コードをコピー＆ペーストしていました。
この件については、いくつかツイートします。
編集スタッフ
Keith, this is by far the best one we found so far as well. Totally appreciate the social media love that you send us
管理者
ジェイソン
Googleドキュメントのiframe機能の代替として、先週このプラグインを入手しました。これはうまく機能し、クライアントがページや投稿を更新せずにテーブルを更新できます。W3プラグインを使用している場合は、キャッシュを空にする必要があることに注意してください。そうしないと、テーブルのキャッシュバージョンが表示されます。素晴らしい記事です。
TobiasBg
Great to hear that you like the plugin!
What you say about caching plugins, like W3 Total Cache, is true. Good thing though: The next version of TablePress will automatically clear the W3 Total Cache page cache, to make sure that all shown tables are up-to-date
敬具
Tobias
TablePress著者
Rod Salm
メインのWordPressメニューにテーブル作成タブを配置するのは奇妙に思えます。メニューは最上位レベルの機能用であるべきです。ツール内、または投稿メニューに配置し、テーブルを選択して、テーブル作成機能を編集機能で利用できるようにするのが良いでしょう。ほとんどの場合、人々は投稿やページでテーブルを作成し、テーブルとその中のデータを編集する必要があるでしょう。
とはいえ、かなり洗練されたテーブル作成ツールです。
Rod Salm
TobiasBg
I agree that the main menu is not always the best option, like when you only maintain a few tables once in a while. So, I made this an option
In the TablePress Plugin Options, you can actually choose where you want the TablePress menu entry to appear. Moving it to “Tools” or “Posts” is no problem with that 
(The predecessor of TablePress put its menu under “Tools” by default. I then however got questions from users who couldn’t find it, after activating it. That is why TablePress will sit in the main menu by default.)
敬具
Tobias
TablePress著者
Artem Russakovskii
プラグインの設定で配置を変更できます。
編集スタッフ
全く奇妙ではありません。これは、お問い合わせフォーム、スライダーなどと同様に、組織化の目的で行われます。このようにすることで、個々の投稿を検索するのではなく、メニューに簡単にアクセスして、作成したすべてのテーブルを確認できます。
管理者
Blograzzi
これは良いですね。使っています。しかし、質問があります。7列10252行のエクセルテーブルがある場合はどうなりますか？
編集スタッフ
10,000行？なぜブログ投稿の一部にしたいのですか？ダウンロードしたい人がいれば、ダウンロードできるように別のファイルとして添付してください。そんなに多くの行があると、ユーザーはそのページの長さに驚くでしょう。
管理者
TobiasBg
編集スタッフがすでに指摘したように、そのような大きなテーブルには、ダウンロードを提供する、またはカスタムPHP/mySQLソリューションを使用するなど、より良い方法があります。
確かにそのサイズのテーブルでTablePressを試すことはできますが、あまりお勧めしません。動作するはずですが、特にテーブルの「編集」画面では、おそらく遅くなるでしょう。
敬具
トビアス
ivica
Absolutely THE best table WordPress plugin at the moment. I tried them all, and this one is the most robust/powerful and yet at the same time the most simple to use. Good choice!