Kadenceチュートリアル:高度なテーブルブロックの説明

コンテンツ?プレゼンテーションでは、よく構(gòu)造化され、視覚的に階層化されたテーブル?レイアウトを使用することができます。主要情報(bào)の効果的なプレゼンテーション商品価格の比較、コースのスケジューリング、機(jī)能パラメータの記述などのシナリオでよく使用される。ケイデンス?ブロック プラグインを 上級(jí)テーブル ブロック ワードプレス ユーザーは、より自由にフォームを構(gòu)築することができる。

ネイティブに比べ グーテンベルク フォームモジュール上級(jí)テーブル マルチレイヤーのネスティング、レスポンシブレイアウトコントロール、カスタムスタイル設(shè)定をサポートし、より密接に実際のアプリケーションの要件に適合します。

畫像[1]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

高度なテーブル?ブロックを追加

ある グーテンベルク エディターで「+」をクリックしてブロックを追加し、検索して挿入する。 上級(jí)テーブル.

畫像[2]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

最初に挿入する際、行と列の初期數(shù)を設(shè)定するプロンプトが表示されます。 予想されるコンテンツ構(gòu)造に応じて基本サイズを設(shè)定し、その後いつでも行と列を追加または削除できるようにすることをお?jiǎng)幛幛筏蓼埂?/p>

畫像[3]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

表の各セル(表データ)には、デフォルトで段落ブロックが含まれており、他の任意の段落ブロックの挿入をサポートしています。 ケイデンス?ブロック 畫像、アイコン、ボタン、リストなどのモジュール。

畫像[4]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

ネストされたブロックによるコンテンツの挿入

任意のセルをクリックすると、テキストを直接入力することができます。

畫像[5]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブレイアウト付き)

を押すこともできる。 / キーを押すか、プラス記號(hào)をクリックして、素早く他の グーテンベルク ブロックを使って入れ子効果を?qū)g現(xiàn)する。

畫像[6]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブレイアウト付き)

この方法は、混合グラフィック、リスト型データ、ボタン付き価格リストなど、より複雑なコンテンツ構(gòu)造を表示するのに適している。

テーブル行管理

各行は個(gè)別に選択でき、ツールバーの矢印で上下位置を調(diào)整できる。

畫像[7]-Kadenceチュートリアル:高度なテーブルテーブルブロック完全ユーザーガイド(スタイリングとレスポンシブレイアウト付き)

行末の「+」ボタンをクリックすると、現(xiàn)在の行の上か下、または上か下に素早く改行が挿入される。

畫像[8]-Kadenceチュートリアル:高度なテーブルテーブルブロック完全ユーザーガイド(スタイリングとレスポンシブレイアウト付き)

各列は獨(dú)立したスタイル設(shè)定をサポートしている:

  • 背景色とホバーの背景色
  • 行の高さ(px、em、vhに対応)
  • レスポンシブ表示設(shè)定:デスクトップ、タブレット、モバイルを個(gè)別に調(diào)整
畫像[9]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

テーブルのカラム(列)管理

テーブルの各列は、テーブル?データ?ブロックで表示される。

畫像[10]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

プラスアイコンをクリックすると新しい列が追加され、任意の位置に挿入することができます。

畫像[11]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)
畫像[12]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

各セルは、獨(dú)立した?jī)?nèi)側(cè)のマージン(パディング)の設(shè)定をサポートしています。

畫像[13]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

各列の幅を細(xì)かく制御する必要がある場(chǎng)合は、"自動(dòng)幅"をクリックし、パーセンテージまたはピクセル値を手動(dòng)で入力することで、異なるデバイスへの適応を向上させることができます。

フォーム全體の設(shè)定

全體を選択した後 上級(jí)テーブル ブロックの後で、フォームモジュール全體のグローバル設(shè)定を行うことができます。

基本設(shè)定

  • 行と列の數(shù):手動(dòng)で調(diào)整可能
  • 最初の行がテーブルのヘッダーとして設(shè)定される。 HTML ラベルは次のように切り替わる。 <th>ヘッダーのフォントスタイルを自動(dòng)的に適用する
  • 最初の列をヘッダーにする:縦書きデータリストにも適用される
畫像[14]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

行と列の機(jī)能を修正(Kadence Blocks Proが必要です)

  • 固定1行目(Sticky First Row):タイトル表示が固定されている長(zhǎng)いフォームでよく使われる。
  • 粘著性のある最初の列:パラメトリックな比較表に適しています。
畫像[15]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

スクロール狀態(tài)での固定表示効果を有効にするには、「最大高さ」または「最大幅」フィールドを設(shè)定する必要があります。

水平スクロール

  • Overflow Xスクロールを有効にすると、モバイルや狹い畫面のデバイスでテーブルのコンテンツを水平方向にスライドさせることができ、列が多すぎるためにコンテンツが切り捨てられる問題を効果的に解決できます。
畫像[16]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

スタイルとビジュアル設(shè)定

アドバンスド?テーブルは、これらに限らず、豊富なスタイル構(gòu)成を提供している:

  • フレーム色、太さを設(shè)定し、行だけに適用するかどうかを選択できます。
  • セル內(nèi)縁ハーモナイズされたもの、されたもの
  • フォントスタイルフォント、フォントサイズ、色、行の高さ、文字の太さ、文字間隔、その他のコントロールをサポートします。
  • ヘッダースタイルテーブルヘッダーのフォントスタイル、色などの個(gè)別設(shè)定
  • 背景奇數(shù)行と偶數(shù)行の背景色を交互に設(shè)定し、読みやすさを向上させることができます。
  • 背景各カラムの専用背景色の設(shè)定に対応
  • 御身長(zhǎng)表全體の行の高さを揃える
畫像[17]-Kadenceチュートリアル:高度なテーブル表ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

詳細(xì)設(shè)定

  • フォームブロック全體に対して外余白と內(nèi)余白を設(shè)定できるので、モジュール間の余白コントロールが容易になります。
  • 現(xiàn)在の設(shè)定をデフォルト設(shè)定として保存し、今後フォームを追加する際に自動(dòng)的に同じスタイルを使用することができます。
  • カスタマイズの追加をサポート カスケーディングスタイルシート よりパーソナライズされたフロントエンドのスタイリング要件に対応するクラス名
畫像[18]-Kadenceチュートリアル:高度なテーブル?タブラー?ブロック完全ユーザーガイド(スタイリングとレスポンシブ?タイポグラフィ付き)

結(jié)語(yǔ)

上級(jí)テーブル ピースミール ケイデンス?ブロック プラグインが提供するレスポンシブ?タイポグラフィとブロック?ネスティング機(jī)能により、高度に制御可能で、美的で機(jī)能的なテーブル構(gòu)造を簡(jiǎn)単に構(gòu)築できる。

サービスパッケージの紹介、コーススケジュール、比較機(jī)能など、よくあるご質(zhì)問 ソリューション、またはeコマース?モジュールを使用する。上級(jí)テーブル いずれもコンテンツレイアウトに不可欠な表現(xiàn)力と柔軟性を備えている。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事を書いた人:泥棒はネズミの勇気になる
終わり
好きなら応援してください。
クドス632 分かち合う
おすすめ
解説 ソファ購(gòu)入

コメントを投稿するにはログインしてください

    コメントなし