WP Table Manager：テーブルのスタイル設定

1. フォーマット

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

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

行の高さと列の幅はピクセル単位で指定できます。メニューの「書式」>「列/行のサイズを適用」を選択し、 「列のサイズ変更」または「行のサイズ変更」を選択してください。ポップアップウィンドウで、範囲を選択して列または行のピクセル値を設定できます。 「完了」 ボタンをクリックして終了してください。

2. テーマとオプション

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

テーマを適用すると、表内のすべてのデータとスタイルが置き換えられます。そのため、テーマを適用し、データを編集して独自のテーマを作成し、表を複製するという手順になります。.

代替色

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

代替色を削除するには、右クリックメニューの「削除 >自動スタイル設定を削除」オプションをクリックします。確認後、色がクリアされます。

表の配置

テーブル配置は、テーブル全体を含むdiv要素を中央揃えにする機能です。たとえば、テーブル全体を中央に配置することができます。 メニューの「書式」>「テーブル配置」。

セルのハイライト

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

テーブルの各セルを右クリックすると、ツールヒントの追加オプションが表示されます。.

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

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

4. 行と列の固定

列の凍結

列の固定は、メニューの 「書式」>「レスポンシブオプション」。最大5列まで固定できます。列数は最初の列から数えられます。

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

固定する列を選択すると、テーブルをスクロールして固定された列を常に表示できるようになります。.

行の凍結

メニューの「書式」＞「表ヘッダー」から設定できます。ここからオプションをオンにして、固定する行数（最大5行）を設定できます。

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

すると、設定に従ってフロントエンドで最初の行が固定されます。.

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

テーブルを並べ替えたり、フィルターをかけたりする場合は、メニューの 「書式」＞「並べ替えとフィルター」 オプションに移動してください。

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

表を並べ替えたい場合は、 「フロントエンドの並べ替え」 オプションを有効にするだけです。デフォルトの並べ替えの対象となる列とその方向を選択できます。

たとえば、この場合は、 ASC 方向の列 Aを選択します。

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

列内： 各列のヘッダーでデータをフィルタリングできます。トグルボタンで、ヘッダーの検索フィールドの表示/非表示を切り替えられます。

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

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

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

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

テーマを適用した場合、カスタムCSSが自動的に追加されますのでご注意ください。もちろん編集も可能です。.

7. カスタムCSS

さらに一歩進んでみましょう。CSSのスキルを持つWebデザイナーであれば、メニューの「フォーマット」>「カスタムCSS」からCSSを追加できます。

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

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

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

テーブルはレスポンシブですか、それとも小型デバイスではスクロールが必要ですか?

列を非表示にする

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

レスポンシブモードは高度な機能で、モバイル端末で列を非表示にする優先順位を設定できます。列が非表示になっている場合、列の表示/非表示を切り替えるためのチェックボックス付きのモバイルメニューが表示されます。
列のサイズはテーブル編集時に固定されます。すべての列のサイズがコンテナに対して大きすぎる場合はオーバーフローが発生し、モバイル端末で簡単にスクロールできるようになります。

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