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、オプションとして優先ツールを使ってレスポンシブデザインに対応しています。デフォルトではレスポンシブ機能は無効になっており、オーバーフローが発生します（ただし、モバイルでは問題なく動作します）。 「列を非表示にする」オプションを使用するには、「メニュー形式」>「レスポンシブオプション」に移動してください。

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

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