メインコンテンツにスキップ

WP Table Manager :スタイリングテーブル

1.フォーマット

ツールバーでは、次のようなセルのスタイルを設定できます。フォント、フォントサイズ、テキストスタイル、セルの背景色、テキストの色、セルの水平方向と垂直方向の配置、...単一のセルまたは複数のセルに適用できます。

 

スタイルテーブル

 

テーブル エディターのパーセンテージを選択できます。 つまり、テーブルを 50% から 200% の範囲で拡大/縮小できます。

 

ズームインアウト

 

行の高さと列の幅はピクセル単位で定義できます。 [メニュー形式]>[列/行サイズの適用]に移動し、 列のサイズ変更]/[行のサイズ変更]を選択。 ポップアップウィンドウで、範囲を選択し、列または行にpxを設定できます。 [完了て終了します。

 

列のサイズ変更

 

2. テーマとオプション

各表のメニューテーマにテーマ選択オプションがあります。 テーマをクリックするだけで適用できます。

テーマを適用すると、テーブル内のすべてのデータとスタイルが置き換えられます。 したがって、続行する方法は、テーマを適用してからデータを編集して独自のテーマを作成し、テーブルを複製することです。

 

テーマ選択

代替色

同じメニューテーマ>代替色で、「自動スタイリング」機能をヘッダースタイリングフッタースタイリングのオプションを使用してテーブルの線に色を付けることができます。 テンプレートスタイルを選択するか、プラグイン設定で独自のスタイルを作成できます。

 

テーマ変更色

 

、右クリックメニューの[削除]> [ 自動スタイルクリックすると、代替色を削除 その後、確認後、色がクリアされます。

 

remove-alternate-color

 

テーブルの整列

テーブルの整列とは、テーブル全体を含むdivを整列することです。たとえば、すべてのテーブルを中央に配置します。 メニューフォーマット>テーブルアラインで見つけることができます。

 

テーブルアライン

セルの強調表示

セルのハイライトもオプションとして利用できます。 この機能は構成で有効にできます。 デフォルトでは無効になっています。 ハイライト行を選択して、ハイライトの色と不透明度を調整できます。

 

テーブルハイライト

 

3.セルにツールチップを追加します

テーブルの各セルで、右クリックすると[ツールチップの追加]オプションが表示されます。

 

追加ツールチップ

 

ツールチップの幅はピクセル単位で設定できます。 編集するエディターを備えたツールチップが表示されます。

 

ツールチップエディタ

 

コンテンツを追加して保存したら、完了です。ツールチップは、マウスをホバーするとパブリックサイドに表示されます。

 

ツールチップホバー

 

4.行と列のフリーズ

カラム凍結

列のフリーズは、[メニュー形式]>[レスポンシブオプション。 最大5列までフリーズできます。 最初の列から数えます。

 

凍結カラム

 

列/行をフリーズさせるには、テーブルの高さを固定できる追加のオプションがあります(テーブルコンテナーの高さが無限になる可能性があるため)。

 

テーブルの高さ

 

フリーズする列を選択すると、テーブルをスクロールして、常に固定列を表示できます。

 

修正行表示

 

行のフリーズ

これは、 [メニュー形式]> [テーブルヘッダー]にあります。ここから、オプションをオンにして、行をフリーズするように設定できます(最大5行)。

 

行フリーズテーブルヘッダー

 

テーブルの高さを設定する場合は、レスポンシブオプションに戻ってください

次に、設定に続いて、最初の行がフロントエンドでフリーズされます。

 

行凍結

 

5. 並べ替えとフィルター

テーブルを並べ替えたりフィルターしたりする場合は、[メニュー形式] > [並べ替えとフィルター]オプションに移動してください。

 

ソートフィルター

 

次に、並べ替えとフィルターのオプションを含むポップアップが表示されます。 

 

フィルターソートポップアップ

 

テーブルを並べ替える場合は、フロントエンドの並べ替え可能オプションを有効にするだけです。 デフォルトの並べ替えの列とその方向を選択できます。

たとえば、この場合は、 ASC列 A

 

並べ替えオプション

 

フィルターには 2 つのオプションがあります。

 

フィルターオプション

 

  • 列の内側:各列のヘッダーでデータをフィルターできます。 トグル ボタンを使用すると、ヘッダーの検索フィールドを表示または非表示にすることができます。

 

列内のフィルター

 

  • 高度なフィルター フォーム:オプションを選択すると、テーブル内のデータを検索およびフィルターできます。

 

高度なフィルター

 

メイン検索:この機能を有効にすると、フロントエンドに検索入力フィールドが追加されます。 これにより、ユーザーはテーブル内のすべてのデータを簡単に検索できます。

 

メイン検索

 

6. セルのパディングと境界半径

セルのパディングと境界線の半径を調整するのに役立つ境界線アイコンがツールバーにあります。

 

パディングボーダー

 

テーマを適用した場合、一部のカスタムCSSが自動的に追加されることに注意してください。 もちろん、編集することもできます。

 

7.カスタムCSS

一歩先を行きましょう。 [メニュー形式]>[カスタムCSS]でcssを追加できます

 

format-custom-css

 

CSSコードはコードミラーを使用して色付けされており、少ないCSSで記述できます。これも機能します。

 

カスタムテーブルcss

 

セル、線、列には、それぞれを識別してカスタムCSSを適用するための座標があります。 Rは行、Cは列です。

 

css-displaying

 

8.レスポンシブWordPressテーブル

私のテーブルは応答性がありますか、それとも小さなデバイスでスクロールを使用しますか?

列を非表示にする

WP Table Managerは、オプションとして、優先ツールを使用してレスポンシブデザインを処理します。 デフォルトでは、レスポンシブ機能は無効になっていますが、オーバーフローが発生します(ただし、魔女はモバイルでうまく機能しています)。 非表示を使用するに [メニュー形式]>[レスポンシブオプション]に移動する必要が

 

レスポンシブ-非表示-列

 

レスポンシブモードは高度で、モバイルサイズで列を非表示にする優先度を定義できます。
列を非表示にすると、チェックボックス付きのモバイルメニューが表示され、列の表示/非表示が強制されます。 テーブルの編集中、列のサイズは固定されています。 すべての列のサイズがコンテナに対して大きすぎる場合、オーバーフローが発生し、モバイルデバイスで簡単にスクロールできるようになります。

スクロール付きの表(列数が少ない場合に適しています)

 

レスポンシブテーブルスクロール

 

列が非表示のテーブル(大量の列の場合に適しています)

 

57bb0cb0ac948

 

繰り返されるヘッダー

これは、サイトの小さな領域にテーブルを挿入する場合のもう1つのオプションです。 [メニュー形式]>[レスポンシブオプション]に移動する必要が 次に、[レスポンシブタイプ]>[繰り返しヘッダー]を選択します。

 

繰り返しヘッダー

 

あなたの要求に応じてカスタマイズするオプションがあります:

  • レスポンシブブレークポイント(px):ピクセル単位でブレークポイント値を選択して、テーブルがこのレスポンシブモードに切り替わるタイミングを定義します
  • レスポンシブ最大高さ(px):レスポンシブモードがアクティブになっている場合、ブレークポイント値に応じて、テーブルが非常に長くならないように最大高さを定義します
  • レスポンシブモードのスタイリング:このレスポンシブモードにデフォルトのスタイリングを適用するか、テーブルの色を使用します

その後、フロントエンドでテーブルがどのように表示されるかを確認できます。

 

繰り返しヘッダーフロントエンド

 

繰り返しヘッダーを使用しており、フィルターオプションが有効になっている場合は、モバイル ビューでテキスト ボックスに入力してフィルターできます。

 

フィルター繰り返しヘッダー

 

9. Excel へのエクスポート

テーブルを PC に保存するには、[メニューテーブル] [Excel のエクスポート] ボタンをクリックする。 フロントエンドでエクスポートした後のファイルタイプは *.xlsx になります。

 

エクスポート-Excel

 

10.ページ付け

この機能は、各テーブルエディションの[メニュー形式]>[ページ付け] トグルボタンを使用して、ページに表示する行数を有効にして選択します。

 

ページネーション-wptm

 

11.セルの境界線のスタイル

境界線の幅、境界線の色、境界線のスタイルなど、テーブルに境界線の種類を適用できます。 まず、セル範囲を選択してから、ツールバーのアイコンをクリックします。

 

ボーダースタイル

 

12.フロントエンドでテーブルを印刷する

場合によっては、表を印刷する必要があります。 、フロントエンドに印刷ボタンを表示するにはメニューテーブルに移動し、にチェックを入れる

 

印刷ボタン