• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / Elementorで表を作る3つの方法

Elementorで表を作る3つの方法

池田祐太郎 | 2021年6月1日 公開 コメントを書く

ノーコードでサイト制作ができるプラグイン、Elementor。便利ですが、ElementorやPro版には表作成(テーブル)の機能がありません。表を作る時に色々な方法があり迷ったためご紹介します。

目次

  • 1 TablePress
  • 2 Table Addons for Elementor
  • 3 Essential Addons for Elementor
  • 4 用途にあった表作成を

TablePress

個人的に一番お勧めの言わずとしれた有名プラグインのTablePress。WordPressでノーコードで表を作る際に最有力候補にはいるのではないでしょうか。簡単な表から凝った表まで作れるためお勧めです。Elementorで表を作る方法として、公式にも紹介されています。

How to Create Tables in WordPress With Elementor & TablePress

TalblePressで作成した表は自由度が高いため、このような表をElementorで作成したページ内に配置することができます。

TablePressで作成した表の例

管理画面から表を作成し、生成されるショートコードをElementor側で挿入すれば完成です。

TablePressで作成した表
表示したい箇所にショートコードを埋め込むだけ

簡単な表作成、CSSを設定してデザインの調整、CSV, HTML, エクセル, JSON等様々な形式でインポートと、表作成でとても使いやすいプラグインです。Elementorで作成するページでも問題ありません。

ひとつ注意が必要なのは、レスポンシブ対応の表は有料のエクステンションが必要ということです。TablePressの公式サイトで詳しい説明があります。フリックに対応した表、スクロールで表示させる表、ボタンを押すことで表示させる表、スタッキングさせる表など、色々な表を表現できます。有料といっても、寄付となっていて自由にダウンロードでき、推奨価格は$12とのこと。実際に使う場合は今後の開発のために寄付しましょう。

TablePress

Table Addons for Elementor

Elementorのウィジェット内で簡易的な表を作成する場合はこちら。細かい編集やレスポンシブ対応の表は作成できませんが、「とりあえず簡単にElementorのウィジェット内からテーブルを追加したい!」という場合は良さそうです。

Elementorのウィジェット内から追加できる

設定項目はかなりシンプル。設定項目は基本の場合表示するテキストのみで、アドバンスドオプションで行や列の連結、右寄せや中央寄せのアラインメント、アンダーラインや取り消し線といったデコレーションが設定できます。それをテーブル見出しとテーブル本体それぞれ設定するという必要最低限のもの。

例のように行や列の結合をするにはアドバンスドオプションを有効にします。行(横方向)を結合するにはcolspanの値を結合したい数値に設定し、列(縦方向)を結合するには同様にrowspanの値を設定します(この場合はそれぞれ2を設定)。
列を結合する場合は、事前に次の列を作成しておかないと数値を入力しても変化しないので注意が必要です。

結合したい表要素に対してrowspanを2に設定しているが、次の列が作成されていないため結合できない状態

色や書式といったスタイルはElementorの他のウィジェット同様、「スタイル」から設定します。

「スタイル」から各種デザインの設定を行う

テーブル内の余白、ボーダー、テーブルの背景や色や書式設定、位置など、基本的な設定が可能です。

Table Addons for Elementorで設定できないものは、各テーブルのclassやid、画像等別の要素などがあり、細かい設定をするには不向きですが簡易的な表データを作成したい場合は十分でしょう。

Table Addons for Elementor

Essential Addons for Elementor

Elementorに数々の機能を追加するパッケージングされた有料プラグインの機能制限版。その中に、表データをウィジェットから追加する機能があります。パック機能だからといって機能がそこそこかと思いきや、細かい設定までできる仕様となっており十分すぎるほど。Table Addons for Elementorよりさらに設定項目があります。ウィジェットから作成できるのは同様。

画像やアイコンを簡単に設定できる

行や列の結合はもちろん、コンテンツタイプをアイコン、テキスト、エディター、テンプレートからセレクトできるため、単純なテキストだけの表から、画像を載せたリッチな表データ、さらにElementorのテンプレートを呼び出せるため、表現の幅がさらに広がります。

さらに嬉しい機能として、レスポンシブ対応していること。

Resvonsive Optionsを有効にした状態。表がスタック表示されているのがわかる

スタイルタブ内にレスポンシブ用のオプションがあり、有効にすると表をスタック表示にすることができます。WidthやColor等の設定も可能ですが、これらは表見出しのみに有効のようなので、見出しを少し整えたい程度となります。
レスポンシブオプションを無効にした状態であっても、はみ出して表示されるわけではなく、はみ出した部分はスクロールされて表示されるため、基本的にレスポンシブ対応となっています。

この多機能なプラグイン、「表作成機能だけでいいんだけど……」というケースに対応できるように、有効にしたい機能だけ選択できるようになっています。

有効にしたい機能だけを選択できる

このように、使いたい機能だけ有効にしておけば、無駄な読み込みが発生しないため、たとえば表作成機能だけ有効にして使うというケースでも問題なさそうです。有料版を利用するとさらに他の機能も有効にできます。(一部はElementorプロ版と重複している機能もありました)

Essential Addons for Elementor

用途にあった表作成を

最初Elementorを使っていて面倒だなと思ったのは、表を作成したいと思った時に基本ウィジェットになく、今回のようにプラグインとして追加しないといけないこと。よく使う機能なのに、なぜ基本ウィジェットにないんだろう?と。これは予想ですが、表作成をWordPress上からノーコードでできるようにするのってかなり大変なんですよね。TablePressを実際に使ってみて感じましたが、「こんなテーブル作りたい」「レスポンシブにも対応したい」「結合や色を自由自在に」という希望をできるだけ叶えるようにすると、ひとつのウィジェット内で提供するには労力がいるだろうと思います。実際、TablePressすごいです。

表ってデスクトップだと見やすいけど、モバイルだと画面の幅が狭いため、どうしても見えにくくなります。スクロールさせたり、スタックさせたりと解決方法もいくつか出てきましたが、どのデバイスで見ても見やすいものというのがなかなか難しい表現の一つです。

もしかしたら将来的にElementorのウィジェットに追加されるような気もしなくもないですが、その際はまずProからでしょうね。

以上、Elementorで表を作成する方法のご紹介でした。

メールコンサルティング
WordPress保守管理サービス

カテゴリTIPS 関連タグ:elementor

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

この記事と関連する記事

Elementor の編集画面でウィジェットパネルのローディングが終わらず編集できない時の解決方法
2022年1月6日
タグ: elementor
カテゴリー: TIPS
[Elementor]アコーディオンやタブでテキスト以外を切り替えたい時
2021年5月12日
タグ: elementor
カテゴリー: WordPress
[Elementor] ウェブページ作成時に便利な要素のテンプレート化とスタイルのコピー
2021年5月11日
タグ: elementor
カテゴリー: WordPress

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.