最新の Web サイトはすべて、さまざまな画面幅で正しく機能するように設計されています。 昔はテーブルはプレーンな HTML を使用して作成されていました。 柔軟な Web デザインが新しい標準になるにつれて、基本的な HTML テーブルは現代の Web サイトの要求に対応するのに苦労しています。 単純な HTML テーブルは応答性がないため、テーブルに含まれるテキストはモバイル画面サイズでは非常に読みにくくなります。そのため、表示されている画面サイズに応じてレイアウトを調整する応答性の高いテーブルの開発に使用されます。 HTML および CSS メディア クエリは相互に組み合わせて使用する必要があります。
- 解決策 1: Divi Builder を使用してテーブルを作成できます。
- 解決策 2: この機能がデフォルトで含まれているテーブルpluginを利用します。
- WP Table Manager
- WP Table Managerのインターフェース
- 結論
表は、大きすぎず多様すぎない 1 つの情報セットに対して、あらゆる画面サイズで読みやすいレイアウトで作成できます。これは、基本的な HTML および CSS アプローチで実現できます。 ただし、テーブルに大量のデータを保持することを目的としている場合、モバイル デバイスや幅が 786 ピクセル未満の画面上で読みやすいレイアウトを構築するのは簡単ではありません。
Web デザイナーが HTML と CSS を使用してあらゆる画面サイズで応答性の高いテーブルを作成する場合、データ量を考慮しないと、サイトのコンテンツの読みやすさに重大な影響を与える問題が発生する可能性があります。 ここでは、Divi Web サイトデザイナーとして、レスポンシブテーブルを手動で作成しようとするときに実践できるいくつかの提案を示します。
より小さい画面に対応するためにテーブルのサイズを小さくする一方で、各クラスが特定の画面解像度を対象とする複数の CSS クラスを構築する必要があります。
別の解決策として、画面サイズが小さい場合にテーブルから特定の列を非表示にすることもできます。
画面が小さい場合は、表のヘッダーとフッターに水平または垂直スクロールを含めることができます。
すべての画面サイズに合わせて拡大縮小できる単一の表を作成し、表をズームして資料を読みやすくします。
これらのソリューションには多大な労力が必要であり、要件はコンテンツや画面サイズによって異なる場合があります。
解決策 1: Divi Builder を使用してテーブルを作成できます。
Elegant Themes は、Divi の組み込み機能を使用してレスポンシブなテーブルを構築する方法を示すチュートリアルを作成しました。 ここで確認してください。 テーブル コンテナからオーバーフローする列に水平スクロール機能が追加され、テーブルがユーザー入力にさらに応答できるようになりました。 詳細については、チュートリアル ページにアクセスしてください。
解決策 2: この機能がデフォルトで含まれているテーブルpluginを利用します。
リポジトリで利用できる豊富な無料のpluginソリューションのおかげで、Divi Web サイトの応答性の高いテーブルを作成することはもう問題ではありません。 ただし、モバイル応答オプションが組み込まれているテーブルpluginを見つけるのは少し難しいです。 wpDataTables などの人気のあるpluginには、無料オプションとしてこの機能がありません。
この記事では、最高のプラグインの 1 つである WP Tabe Builderpluginを検討します。
WP Table Manager
WP Table Managerテーブルを管理するためのスプレッドシート全体のインターフェイスを提供する唯一の WordPress テーブルpluginです。 テーブルを作成し、テーマを選択し、作成が完了したらすぐにテーブルの編集を開始します。 HTML セルの編集、表のコピー、計算、Excel、Google スプレッドシート、Office 365 との同期など、強力な表編集機能の包括的なセットを活用できます。 セルをクリックするだけで簡単にデータを編集できます。エンドユーザーは、ビジュアル テキスト エディターを使用して、または使用せずにテーブルを変更できます。
WP Table Managerと、シンプルなビジュアル インターフェイスを使用して、魅力的で応答性の高いテーブルをデザインできます。 使用は無料です。 アクティブ化すると、セットアップ ガイドが表示されます。 手順に従って、必要な調整を行ってください。 まるで魔法のように、あらゆるサイズのデバイスで美しく表示される美しいテーブルが作成されました。 次に、ショートコードをコピーして、表示したいページに貼り付けるだけです。 ビルダーは現在、ドラッグ アンド ドロップ機能を使用してテーブルのプレースホルダーにドラッグ アンド ドロップできる 7 つの要素 (テキスト、画像、リスト、ボタン、星評価、カスタム HTML、およびショートコード) を提供しています。 これらを使用して、製品比較表、価格表、リスト表などのさまざまなタイプの表を作成できます。 これは、調査中に最も初心者に優しいことが判明した Tablepluginです。 現在のバージョンには検索フィールドやその他の種類のフィルタリング機能がないことに注意してください。 さらに、多くのデータ セットを入力または管理する場合、これは理想的なオプションではない可能性があります。 このタイプの使用シナリオでは、Visualizer または Tablepress は両方とも優れた選択肢です。
WP Table Managerのインターフェース
Divi のコード モジュールまたはテキスト モジュールにショートコードを含めることができます。
DIVI テーマにはWP Table Manager含まれています。
WP Table Managerpluginテーブルの処理に関する詳細の管理に答えます。
- テーブルでフィルター オプションを有効にすると、各列のデータを検索し、テーブル全体をフィルターできます。 ページネーションを含む巨大なテーブルでも動作します
- 各列に表示される上矢印と下矢印を使用して、テーブル データを配置します。 テーブル データの順序付けは、ページネーションを含む巨大なテーブルでも機能します。
- 必要なすべてのデータを含むテーブルを作成したら、ユーザーに並べ替えを許可できますが、デフォルトの順序を確立することもできます。 時間の経過とともに情報が変化する場合、レース後にランナーを到着順に並べ替えることができるため、これは非常に有益です。
- サーバー リソースを維持しながら、Web サイトのフロントエンドに大きなテーブルを表示したい場合は、ページネーションが必要です。 各ページのテーブル行のプリセット量を選択します。
WP Table Manager Excel ファイル インポーターを通じて Excel ドキュメントを管理するオープンな方法もあります。 ただし、Excel データを編集可能な HTML テーブルとしてインポートおよび変換するか、色、背景、列サイズ、リンクを含むスタイルで Excel ファイルをインポートすることのみが可能です。
Excel テーブルを管理し、WordPress Web サイトに公開しましょう。 WordPress メディア管理または FTP クライアントを介して Excel ファイルをテーブルにアップロードできます。 次に、Excel ファイルを選択し、テーブル設定から同期を開始します。
WordPress テーブルと Excel ファイル間の同期は、1 分から 1 日の間で定期的に実行できます。 自動同期遅延は、WordPress パブリック テーブルの不要な更新を回避したり、巨大なテーブルのサーバー リソースを節約したりするために定義することもできます。
テーブルをインポートした後、すべてのデータが更新される可能性があります。 これはpluginのように編集できる通常の HTML テーブルです。 WordPress のスプレッドシート。
一方、必要なすべてのデータを含むきちんとしたテーブルを構築した後、それを従来の Excel ファイルとしてエクスポートし、amp、後で更新された Excel シートを再実行することもできます。 これで、ユーザーは WordPress フロントエンドでテーブルを Excel シートとしてエクスポートできるようになります。
WP Table Manager、OneDrive を通じて Office 365 とも同期します。
OneDrive Excel ファイルのインポートおよびエクスポート ツールが利用可能です。 実行中にファイルをインポートして変更することで時間を節約できます。 OneDrive ファイル同期で生産性がさらに高まります。 同期する Office 365 Excel ファイルを選択すると、自動的に調整され、Web サイト上で公開されます。
WP Table Managerデータベースからテーブルを構築してインポートするのに役立ちます。 以前は利用できなかった、Web サイトのデータベース コンテンツの選択からテーブルを生成するツールが含まれるようになりました。 データベースのテーブルと列が選択され、構成可能なフィルターが適用され、テーブルはWP Table managerインターフェイスを介して管理されます。 データベースが更新されると、テーブルは自動的に増分されます。 さらに、並べ替え、フィルタリング、自動デザイン、ページネーションのオプションも自由に利用できます。
開発者でない場合でも、データベース素材を HTML テーブルに視覚的に接続できます。 データベースのコンテンツから新しいテーブルを生成するときに、データベース内のすべてのテーブルが表示されます。
Web サイトのデータベースは単純な検索を実行して、テーブルと列を選択する場合があります。 これは、巨大なデータベースでは非常に有益です。 さらに、データベースからテーブルを段階的に操作できるウィザードが用意されています。
最終段階では、データベースからテーブルをプレビューする前に、指定したデータベース テーブルにカスタム クエリを作成できます。 SELECT、REPLACE、RENAME、SHOW、EXPLAIN、DESCRIBE などのいくつかの関数をサポートしています。
データベース テーブルには多くの行が含まれる場合があります。 したがって、このオプションは、画面に合わせて表を表示するのに役立つ場合があります。 さらに、テーブルの各ページの行数を事前定義済みに設定できます。 さらに、デフォルトでテーブル全体をソートする列を選択することもできます。
WordPress データベース テーブルの接続は、WordPress テーブルのみに限定されません。 WordPress からのものではなく、同じデータベースにインストールされているすべてのテーブルに接続できます。
テーブル上の大量のデータの中から、特定のオブジェクトに集中するカスタム ルールをいくつか作成できます。 慣れている場合は、>、<、LIKE、IN などのデータベース演算子を使って遊ぶことができます。
作成したデータベースのテーブルは、他のテーブルと同様に編集できます (ユーザーが適切な機能にアクセスできる場合)。 これは、amp、1 つずつ実行すると時間がかかるいくつかの出版後の日付などのデータベース データをバッチ編集する場合に非常に便利です。
結論
表は、一連の情報を示す最も効果的な方法の 1 つです。 ただし、技術に詳しくない人にとって、Web ページ上に表を作成するのは困難です。 これらのpluginを使用すると、いくつかの簡単な手順で、どのデバイスでも読み取り可能なテーブルを簡単に作成できます。 さらに、応答性の高いテーブルは、サイト訪問者に全体的なエクスペリエンスを確実に提供します。 ぜひこれを試してみて、以下のコメントセクションであなたの経験を教えてください。
