さまざまなデータテーブルオプションを使用して見栄えの良いテーブルを作成する
公開: 2016-04-12テーブルは、どのWebサイトでもかなり一般的なコンテンツコンポーネントです。 ただし、作成が難しい場合もあります。 SupsysticのDataTableGeneratorは、プログラミングスキルがなくても、多くのオプションを備えた忘れられないデータテーブルを作成し、WordPressの投稿またはページにショートコードを配置するだけの簡単な方法です。 データテーブルプラグインにはさまざまな機能があり、それぞれのニーズに役立つと確信しています。 それでは、それらの中で最も価値のあるものについて話しましょう。
テーブルが大量のデータで構成されている場合は、ページ付け、並べ替え、さらにはWebサイトユーザーの利便性の検索を使用することをお勧めします。 これにより、テーブルのページをめくったり、データを降順または昇順で並べ替えたりすることができます。 また、テーブル全体を調べる時間があまりない場合は、必要な情報を検索フィールドに入力するだけで、すぐに見つけることができます。 素晴らしいですね。 これらの機能は多くの時間を節約できます。 そして私たちは、現代の世界では時が金なりであることを知っています。
また、ユーザーがテーブルを保存したり、印刷したりできるようにすることもできます。 フロントエンドのエクスポート機能を見つけて、形式(CSV、Excel、PDF、印刷)を選択するだけです。 Webサイトのユーザーには、テーブルの近くに対応するボタンが表示され、これらの形式でダウンロードしたり、印刷したりできます。 さらに、PDFまたは印刷物に会社のロゴを追加することができます。これはあなたのビジネスを表すので非常に便利であり、顧客によって思わず記憶されます。 PDFをダウンロードするか、以下の表を印刷してロゴを確認してください。
言及する価値のある他のオプションは、SCV、XLS、XLSX、Googleスプレッドシートなどのファイルのインポートです。 これで、コンピューターにテーブルの準備ができている場合は、データテーブルプラグインでテーブルを作成する時間を無駄にする必要はありません。 WordPressプラグインにインポートして、ウェブサイトにショートコードを貼り付けるだけです。 同様に、適切な形式(CSV、Excel、PDF)を使用して、データテーブルプラグインからコンピューターにテーブルをエクスポートできます。
さらに、サイトがさまざまなガジェットから表示されると想定している場合は、レスポンシブモード機能に関心があります。 Data Table Generatorは、次の応答モードを提供できます。標準、自動列非表示、水平スクロール、または必要がない場合は応答を無効にすることができます。 標準のレスポンシブモードでは、テーブルの内容が収まらない場合、行ごとに1つのセルを使用して列を相互に配置します。 列を自動的に非表示にすると、列が右から左に折りたたまれます。 水平スクロールは、テーブルが親コンテナの幅を超えたときにスクロールバーを追加します。 応答性を無効にすると、テーブルはデフォルトのレイアウトになります。 次の表で、Webページのサイズを変更して、さまざまなレスポンシブモードの動作を確認できます。
ファーストネーム | 苗字 | 街 | 街 | 郵便番号 | Eメール | DOB |
---|---|---|---|---|---|---|
エルドン | Roob | スピンカランド | ジェイドンフォート | 86743 | [email protected] | 1991年1月17日 |
Hoyt | コール | スチュワートビュー | スチューバー諸島 | 04689 | [email protected] | 1989年8月14日 |
アニー | コリアー | ウィルトンビュー | Homenick Fords | 76947-8004 | [email protected] | 30.10.1990 |
ファーストネーム | 苗字 | 街 | 街 | 郵便番号 | Eメール | DOB |
ロメインレタス | デネシク | イーストフランコシャー | オデルビュー | 92164-3876 | [email protected] | 1984年8月26日 |
ダレン | ジョンソン | ローハンマス | カルロッタエステート | 51692 | [email protected] | 1995年3月26日 |
ブラッドリー | ハウエル | ノーステレンス | ドリスレイクス | 06511-9359 | [email protected] | 1993年2月26日 |
上記の機能に加えて、データテーブルプラグインを使用すると、選択したセルに画像、リンク、またはコメントを挿入できます。 以下の表では、「What」列にコメントが表示されています。コンテンツにマウスを合わせるだけです。
写真 | 何 | WHO | いつ | どこ | どうして |
![]() | ロック・クライミング | 通常は一人ですが、友達と一緒にいることもあります。 | 月曜日、水曜日、金曜日の午後4時から午後5時 | パシフィックエッジロッククライミングジム | クライミングは、心臓血管の持久力、筋力と持久力、柔軟性、および骨の強度の改善または維持に役立ちます |
![]() | 私の犬を歩く | 私と私の犬だけ | 土曜日と日曜日、私が自由なときはいつでも | ウェストクリフ | ウォーキングは心臓血管の耐久性と骨の強さを改善します |
![]() | ワークアウト | 自分で | 月曜日、水曜日、金曜日の午後5時から午後5時30分 | パシフィックエッジロッククライミングジムにて | ワークアウトは筋力と持久力に役立ちます |
行の形式も設定できます。 通貨、日付、またはパーセントを操作するときに非常に役立つ場合があります。 さらに、テーブルに編集可能なフィールドを設定できます。 この機能は、数式を使用するときに役立ちます。 たとえば、あなたのビジネスは改修に関連していて、あなたはあなたのサービスの価格を表に示しています。 編集可能フィールドを設定すると、将来の顧客は自分の家の面積サイズを入力でき、価格が計算されます。 とても参考になったと思いますが、あなたは? 以下のWordPressテーブル(「平方フィート」列)でこのオプションを試してください。

アイテム | 平方フィートあたりのコスト | 平方フィート | 合計 |
木の床を砂で仕上げます | 2.5 | 0 | |
セラミックタイル床を設置する | 16 | 0 | |
ビニールタイルの床を設置する | 4 | 0 | |
壁一面のカーペットを設置する | 8 | 0 | |
小計: | 小計: | 0 |
テーブルを視覚化するために、 GoogleChartsを追加できます。 SupsysticのDataTableGeneratorを使用すると、さまざまな種類の図やグラフをすばやく簡単に作成できます。 詳細については、GoogleChartsのデータテーブルをご覧ください。
素晴らしいニュース! CSSエディターを使用して、テーブルの忘れられないスタイルを作成できます。 この機能を使用すると、さまざまな方法でテーブルを編集できます。 CSSやその他のプログラミングスキルの知識がほとんどなくても、それほど複雑ではないため、それを行うことができます。 CSSエディターを使用して作成された、影と丸みを帯びた角のある以下の表を確認してください。
名前 | 位置 | オフィス | 給料 |
---|---|---|---|
佐藤愛理 | 会計士 | 東京 | 162,700ドル |
アンジェリカ・ラモス | 最高経営責任者(CEO) | ロンドン | $ 1,200,000 |
アシュトンコックス | ジュニアテクニカルライター | ニューヨーク | 86,000ドル |
ブラッドリー・グリア | ソフトウェアエンジニア | ロンドン | 132,000ドル |
ご覧のとおり、Supsysticのデータテーブルは、さまざまなテーブルを作成するのに最適です。 これにより、SEOに適したデータテーブルをすばやく簡単に処理および管理できます。 WordPressのデータテーブルプラグインは情報を構造化することができ、あらゆるニーズに合わせて調整できます。 テーブルの機能的および視覚的なカスタマイズには多くの方法があり、サイトのデザインを改善し、さまざまな個人やタスクに合わせて変更することができます。
SypsysticによるWordPressデータテーブルジェネレーターの詳細をご覧ください。