最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressの投稿やページにテーブルを追加する方法(HTML不要)

WordPressの投稿やページにテーブルを追加すると、データを整理し、読者が理解しやすくなります。WordPressでは、デフォルトのテーブルブロックでこれを非常に簡単に行えます。

WPBeginnerでは、まとめ記事で上位5つまたは10個のプラグインを表示するためにテーブルを使用し始めました。この簡単な変更により、エンゲージメントが向上し、情報の読みやすさが向上しました。

最も良い点は、デフォルトのブロックに便利な スタイリングオプションが含まれており、テーブルを魅力的に見せることができることです。この記事では、WordPressでテーブルを簡単に作成および管理する方法を説明します。

テーブルの挿入の基本と、コーディングを知らなくてもソートや検索などの高度な機能でテーブルを改善する方法を学びます。

コードを書かずにWordPressでテーブルを追加する

💡 クイックアンサー:WordPressの投稿やページにテーブルを追加する方法

デフォルトのブロックエディターを使用すると、WordPressに簡単にテーブルを追加できます。「テーブル」ブロックを追加し、行と列を選択して、データを入力するだけです。

高度な機能や従来のTablePressのようなプラグインは素晴らしい選択肢です。

WordPressの投稿やページにテーブルを追加する理由

WordPress の投稿やページにテーブルを追加すると、情報を整理するのに役立ちます。コンテンツを簡単に消化できるチャンクに分割し、読者にとってより親しみやすいものにします。

比較表、リスト、または統計情報を表示する場合でも、テーブルはデータを表示するためのクリーンで構造化された方法を提供します。

さらに、テーブルは全体的なユーザーエクスペリエンスを向上させることができます。長い段落をスクロールする代わりに、読者は探している情報をすばやく見つけることができます。

これにより、コンテンツはクリーンでプロフェッショナルな外観になり、より魅力的になります。

それでは、WordPressの投稿やページに簡単にテーブルを追加する方法を見ていきましょう。2つの異なる方法をカバーし、それぞれの違いの概要は次のとおりです。

機能WordPressテーブルブロックTablePressプラグイン
使いやすさエディター内で直接、基本的な静的テーブルを作成する場合に非常にシンプルです。基本的なテーブルにはシンプルですが、高度な機能には少し手間がかかります。
高度な機能ソート、検索、ページネーション、フィルタリング機能は組み込まれていません。訪問者向けのソート、検索、ページネーション、フィルタリングをサポートします。
再利用性テーブルは特定の投稿/ページに埋め込まれており、再利用が困難です。ショートコードを使用するため、テーブルを複数の投稿、ページ、またはウィジェットで使用できます。
スタイリング/カスタマイズ基本的なスタイルオプション(背景/テキストの色)、テーマに依存します。カスタムCSSやプレミアム拡張機能を含む、より高度なカスタマイズオプション。
最適単一の投稿またはページ内でのシンプルで静的なデータ表示。複雑で動的、再利用可能、または大規模なデータセット。高度な機能が必要な場合。
費用無料(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 » 新規追加に移動してください。

Tablepress 新規追加

テーブルの名前を入力し、行数と列数を決定する必要があります。後でテーブルの行や列を追加/削除することもできます。

テーブル名、行、列を追加したら、「テーブルを追加」ボタンをクリックしてテーブルを作成してください。

次に、テーブルの情報が表示され、コンテンツを追加できる領域が表示されます。

TablePressテーブルの編集

テーブルのセルに、入力したいデータを単純に入力してください。

行や列を追加または削除したり、並べ替え操作を実行したりするには、テーブル内を右クリックするだけです。オプションメニューが表示され、さらに変更を加えることができます。

テーブルオプションを右クリック

「テーブル操作」などの高度なオプションは、「テーブルコンテンツ」エリアの下にあります。

ここから、行を追加、削除、複製できます。

テーブル操作オプション

「テーブルオプション」では、ヘッダー行やフッター行を追加できます。これらはデータと一緒にソートされません。

テーブル名と説明を表示する場所も決定できます。

高度なテーブルオプション

最後に、「サイト訪問者向けテーブル機能」セクションでさまざまなオプションを設定できます。

これらの設定により、読者がフィルター、検索、並べ替えできるレスポンシブテーブルを作成できます。

テーブル機能サイト訪問者

テーブルに満足したら、「変更を保存」をクリックするだけです。

その後、Tableのショートコードをコピーします。次のステップで必要になります。

💡プロのヒント: ショートコードを使用する最大の利点の1つは、同じテーブルを複数の投稿、ページ、またはサイドバーウィジェットに配置できることです。

テーブルを更新する必要がある場合は、1か所を編集するだけで、ショートコードが使用されているすべての場所に自動的に変更が表示されます。これにより、多くの時間を節約できます!

次に、テーブルを表示したい投稿またはページを編集し、エディターにショートコードブロックを追加します。

ショートコードを追加

その後、先ほどコピーしたショートコードをショートコードブロックに追加します。

変更を更新または保存することを忘れないでください。

一方、クラシックエディターを使用している場合は、投稿に直接ショートコードを追加するだけです。

クラシックエディターでのショートコード

将来的にテーブルを変更したい場合は、ダッシュボードのTablePressに戻って変更できます。テーブルは、使用したすべての投稿やページで自動的に更新されます。

TablePressでは、スプレッドシートやCSVファイルからデータをインポートすることもできます。同様に、TablePressテーブルデータをCSVファイルにエクスポートすることもできます。これは、Microsoft ExcelやGoogle Sheetsなどの任意の表計算プログラムで開くことができます。

動画チュートリアル

文章での説明よりも動画での説明がお好みであれば、こちらのビデオチュートリアルをご覧ください。

WPBeginnerを購読する

WordPressテーブルに関するよくある質問

WordPressウェブサイトにテーブルを追加することについて、よく寄せられる質問を以下に示します。

WordPressでテーブルをレスポンシブにするにはどうすればよいですか?

デフォルトのWordPressテーブルブロックには、レスポンシブ設定が限定されています。モバイルデバイスで見栄えの良いテーブルには、TablePressのようなプラグインが最善の解決策です。

小さな画面で横スクロール可能なテーブルを作成できるため、サイトの使いやすさを維持するのに役立ちます。

テーブルの外観をカスタマイズできますか?

はい。組み込みのテーブルブロックには、背景色とテキスト色を変更するための基本的なスタイルオプションがあります。WordPress テーマも独自のスタイルを追加する場合があります。

より高度なデザイン制御のために、プラグインを使用すると、カスタムCSSでテーブルをカスタマイズする力がさらに増します。

ExcelまたはGoogleスプレッドシートからWordPressにデータをインポートするにはどうすればよいですか?

ExcelやGoogle Sheetsのようなスプレッドシートからデータをインポートする最も簡単な方法は、プラグインを使用することです。

TablePressには、CSVファイルを直接アップロードできる組み込みのインポート機能があります。これにより、手動でデータを入力するよりも大幅に時間を節約できます。

ソート可能で検索可能なテーブルを作成する最良の方法は何ですか?

デフォルトのWordPressテーブルブロックは、単純なデータ表示には適していますが、並べ替えや検索はサポートしていません。

これらのインタラクティブな機能を追加するには、プラグインが必要です。TablePressは、訪問者が列を並べ替えたり、テーブル内の特定の情報を検索したりできる優れた無料の選択肢です。

この記事が、HTMLを使用せずにWordPressの投稿やページにテーブルを追加する方法を学ぶのに役立ったことを願っています。また、WordPressで目次を作成する方法に関するガイドや、WordPressエディターで特定のユーザーからブロックを非表示にする方法に関するチュートリアルも役立つかもしれません。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

130件のコメント返信する

  1. 良いテーブルプラグインですが、モバイルフレンドリーではありません。
    テーブルの右側がモバイルビューで切り取られます。

  2. こんにちは

    動的なテーブルを作成する方法を誰か教えてもらえませんか?

    WordPress初心者です。ガジェット(例えば電話)のデータベースを管理したいです。管理者として仕様とアイテムの写真を簡単に入力できるインターフェースが欲しいです。ユーザーはブランドでフィルタリングしたり、これらのガジェットを2つ以上テーブル形式で比較したりするオプションを持つべきです。また、アイテムをクエリしてすべての仕様をテーブル形式で見れるようにしたいです。これを簡単に管理する方法についてアドバイスをいただけますか?あるいは、すでに記事がありますか!?

    ありがとう

    • 他の読者の皆さん、私にあまり厳しくしないでください(特にRという言葉を使わないでください)。私はこのすべてに非常に新しく、最初のテーブルを作成することに成功したと感じています。さて、テーブルのテキストの外観を変更するにはどうすればよいですか?ページの下部にある資料へのリンクや、重要な部分を強調するために使用しています。

      • CSSを使用する必要があります。これには多少の学習曲線があります(この場合、テーブル、行、テーブルセル、テーブルセル内の段落、リンク、ホバー効果などをスタイル設定したい場合があります)。そのため、本当に重要な場合にのみ開始してください。

    • TablePress を使用して作成したテーブルを失いました。どのように削除されたのか分かりませんが、削除されたテーブルを復旧する方法がないことも分かりました。テーブルがどのように削除されたのか分からないため、TablePress に頼ることに不安を感じています。

  3. 私だけですか、それともWordPressは遅いですか?つまり、最近のWYSIWYGエディターならテーブルをその場で作成できますが、最大のCMSはできないのですか?何か見落としているに違いありませんが、プラグインやiframeを使用するのは簡単なテーブルには手間がかかりすぎます…自分でコーディングします。

    • デビッドさん、私も同感です。理解できません。1998年の最初のHTMLエディタにはテーブルがありました…なぜCMSベースのウェブサイトを作るのは簡単なのに、テーブルが作れないのでしょうか…ハローーーー!!

    • Davidさん、こんにちは

      WordPressで自分でコーディングしようと思いましたが、テーブルの書式設定がうまくいきませんでした。ページでHTMLを特定の使い方はありますか?

      ありがとうございます

  4. WordからWordPressにテーブルをコピーしましたが、コードはきれいで整っています。うまく機能します。今度はFooTableプラグインで同じテーブルをレスポンシブにするために試したいのですが、すでに何らかの形でレスポンシブになっています。ウェブデザイナーは素材をローカルコンピュータに保存しておくので、Wordで変更してWPのテーブルを置き換えることができると考えていました。これはずるいかもしれませんが、機能します。Sirje

  5. TablePressは素晴らしいプラグインです。

    この投稿をありがとうございます。

    実は今日ダウンロードして、すでに彼らのチームに寄付しました。

    皆さん、素晴らしい一日をお過ごしください。

  6. このようなプラグインの問題は、プラグインを放棄すると、そのプラグインにリンクされたコンテンツがサイト全体で壊れてしまうことです。

    非常に洗練されたプラグインですが、できるだけデータベースへの依存を最小限に抑えようとしています。

    • Neal、その点については正しいです。しかし、TablePressはテーブルにカスタム投稿タイプを使用しています。これは、プラグインを無効にしてもテーブルがデータベースに保存されることを意味します。データは引き続きエクスポートできます。

      管理者

  7. こんにちは、WPbeginnerチーム様

    同じ方法でスクリプトを呼び出すことは可能ですか?

    例として、500個の異なる投稿に対して1000個の異なるスクリプトがあります。

    各投稿で2つのテーブルを呼び出したいのですが、そのテーブルでテキストではなくスクリプトを実行したいのですが、テーブルで2つのスクリプトを呼び出すことは可能ですか?

  8. これをありがとうございます!クライアントがログインして売買したい商品の価格を投稿でき、それが一般に公開されたままになるテーブルを作成するには、どのようなリソースを使用できますか?

  9. フォームまたはページにテーブルを追加することに興味があります。ユーザーがページにアクセスした場合、セルに数量を追加でき、フォームの下部でテーブルを私に送信できます。

    基本的には、支払いオプションのない非常にシンプルな注文ページになります。

  10. tablepressプラグインを使用してブログ記事にテーブルを挿入しようとしています。突然、各ページの左下隅に角括弧で囲まれた「Edit」という単語が表示されるようになりました。それを削除できません。どうすれば修正できますか?

    ありがとうございます!

    Pierre

  11. 素晴らしい…この記事を読んでインストールしました…モバイルプレビューに進むと問題が発生しています…様子を見ます。全体的に素晴らしいプラグインと記事です(Y)

  12. OK、プラグインをインストールして、ショートコードを使用してテーブルを投稿に追加しました。私の質問は、Googleはショートコードを読むのですか、それともテーブルの内容を読むのですか?SEOフレンドリーですか?このプラグインを使用した投稿へのリンクを教えてください。

  13. プラグインは気に入っていますが、列/行の幅/高さをカスタマイズする方法、または特定のセルをコンテンツのサイズに合わせる方法がわかりません。何か方法はありますか?ありがとうございます。

      • データベース内の任意のMySQLテーブルを表示できれば素晴らしいでしょう。これは簡単に修正でき、このプラグインの有用性を大幅に向上させることができるはずです

  14. テーブルの上部にある「XX件表示」と下部にある「1~6件中6件表示」を削除するにはどうすればよいですか?

  15. こんにちは。
    特定のユーザーがコピーやファイルのインポートなどでテーブルを追加できるように、投稿セクションでTablePressフォームをどのように使用できますか?
    使い方を教えてください。
    よろしくお願いします。

    敬具
    Jaya

  16. これは素晴らしいプラグインです。質問が1つあります。テーブル内の情報をより大きく表示する必要があります。各セルに個別にコードを入力する以外に、何か方法がありますか?

  17. それで、どのWordPressバージョン向けに書いていますか?WordPress.comですか、それともWordPress.orgですか?ダッシュボードでプラグインオプションが見つからないからです。これを指定すべきです…期待していたのに、今は手でコードを書くのに戻っています。

  18. すごい。

    私は簡単に感動しませんが、これはそれを成し遂げました。
    プラグインを追加してからわずか数分で、私のサイトに視覚的に美しく、簡単にメンテナンスできるテーブルができました。

    ありがとうございます!

  19. このプラグイン、大好きです。
    Headwayでテーブルをスタイリングしようとしましたが、今のところうまくいっていません。他に試した方はいらっしゃいますか?もし可能であれば、素晴らしいと思います。
    重ねて、素晴らしいプラグインです :-)

    編集

  20. これを見つけられて本当に良かったです!プログラミングの知識がない私は、コードでテーブルを作成するのに大変苦労していました。

  21. これ、ありがとうございます!ウェブサイトで素晴らしい価格表をたくさん見ていて、解決策を探していました。TinyMCE プラグインを使っていますが、それは機能しますが、本当に必要としているものではありません。改めて、皆さんは最高です。

  22. 投稿ありがとうございます!
    ところで、セルにコードを追加することは可能でしょうか? PayPalのコードをテーブルに追加したいのですが、最善の方法がわかりません。

  23. この比較的使いやすいプラグインに本当に感謝しています。私は技術に詳しくないので、プラグインでできることに何時間も費やしたくないので、多くのフラストレーションから救われました。

    テーブル作成用の他のプラグインもいくつか試しましたが、使いやすさの点では感心しませんでした。

    大変感謝いたします!
    Yvonne

  24. これは、私たちがいくつかのサイトで使用しているTables Reloadedのように見えます。しかし、これはより使いやすく管理しやすいように見えます。w3 total cacheのようなキャッシュプラグインとはどの程度うまく機能しますか?

    • これは、同じ開発者(Tobias)が手がけたWP Tables Reloadedプラグインの後継です。Tobiasは、次のバージョンがW3 Total Cacheと互換性があるというコメントもこの投稿に寄せています。

      管理者

  25. 全く同感です。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に修正を公開しました。しかし、私の言葉を鵜呑みにしないでください。サポートフォーラムを確認してください。

    ジェフ・コーハン

  26. みんな、ありがとう
    これが私にとってのテーブルプラグインになるかもしれない。

    以前は Dreamweaver でテーブルを作成し、コードをコピー&ペーストしていました。

    この件については、いくつかツイートします。

  27. Googleドキュメントのiframe機能の代替として、先週このプラグインを入手しました。これはうまく機能し、クライアントがページや投稿を更新せずにテーブルを更新できます。W3プラグインを使用している場合は、キャッシュを空にする必要があることに注意してください。そうしないと、テーブルのキャッシュバージョンが表示されます。素晴らしい記事です。

    • プラグインを気に入っていただけて嬉しいです!
      キャッシュプラグイン、例えばW3 Total Cacheについておっしゃることは本当です。しかし良い点があります:TablePressの次のバージョンでは、表示されるすべてのテーブルが最新の状態であることを確認するために、W3 Total Cacheのページキャッシュが自動的にクリアされます :-)

      敬具
      Tobias
      TablePress著者

  28. メインのWordPressメニューにテーブル作成タブを配置するのは奇妙に思えます。メニューは最上位レベルの機能用であるべきです。ツール内、または投稿メニューに配置し、テーブルを選択して、テーブル作成機能を編集機能で利用できるようにするのが良いでしょう。ほとんどの場合、人々は投稿やページでテーブルを作成し、テーブルとその中のデータを編集する必要があるでしょう。

    とはいえ、かなり洗練されたテーブル作成ツールです。

    Rod Salm

    • メインメニューが常に最良の選択肢ではないことには同意します。例えば、たまに数個のテーブルしか管理しない場合などです。そこで、これをオプションにしました :-) TablePressプラグインオプションで、TablePressメニューエントリを表示したい場所を実際に選択できます。「ツール」や「投稿」に移動させることは、それによって問題ありません :-)
      (TablePressの前身はデフォルトでメニューを「ツール」の下に置いていました。しかしその後、有効にした後で見つけられないというユーザーからの質問がありました。そのため、TablePressはデフォルトでメインメニューに配置されます。)

      敬具
      Tobias
      TablePress著者

    • 全く奇妙ではありません。これは、お問い合わせフォーム、スライダーなどと同様に、組織化の目的で行われます。このようにすることで、個々の投稿を検索するのではなく、メニューに簡単にアクセスして、作成したすべてのテーブルを確認できます。

      管理者

  29. これは良いですね。使っています。しかし、質問があります。7列10252行のエクセルテーブルがある場合はどうなりますか?

    • 10,000行?なぜブログ投稿の一部にしたいのですか?ダウンロードしたい人がいれば、ダウンロードできるように別のファイルとして添付してください。そんなに多くの行があると、ユーザーはそのページの長さに驚くでしょう。

      管理者

    • 編集スタッフがすでに指摘したように、そのような大きなテーブルには、ダウンロードを提供する、またはカスタムPHP/mySQLソリューションを使用するなど、より良い方法があります。
      確かにそのサイズのテーブルでTablePressを試すことはできますが、あまりお勧めしません。動作するはずですが、特にテーブルの「編集」画面では、おそらく遅くなるでしょう。

      敬具
      トビアス

  30. 現時点で間違いなく最高のテーブルWordPressプラグインです。すべて試しましたが、これが最も堅牢/強力でありながら、同時に最も使いやすいものです。良い選択です! :-)

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。