在內(nèi)容展示中，結(jié)構(gòu)清晰且具備視覺層次的表格布局能有效展示關(guān)鍵信息，常被用于產(chǎn)品價(jià)格對比、課程排期、功能參數(shù)說明等場景。Kadence Blocks 插件中的 Advanced Table 區(qū)塊，為 WordPress 用戶提供了更自由的表格構(gòu)建能力。

相比原生 Gutenberg 表格模塊，Advanced Table 支持多層嵌套、響應(yīng)式布局控制、自定義樣式設(shè)定，更貼合實(shí)際應(yīng)用需求。

添加 Advanced Table 區(qū)塊

在 Gutenberg 編輯器中，點(diǎn)擊“+”添加區(qū)塊，搜索并插入 Advanced Table。

首次插入時(shí)將提示設(shè)置初始的行與列數(shù)量，建議根據(jù)預(yù)期內(nèi)容結(jié)構(gòu)設(shè)置基本尺寸，后續(xù)可隨時(shí)增加或刪除行列。

表格中的每個(gè)單元格（Table Data）默認(rèn)包含段落區(qū)塊，并支持插入任意其他 Kadence Blocks 模塊，如圖像、圖標(biāo)、按鈕、列表等。

插入內(nèi)容與嵌套區(qū)塊

點(diǎn)擊任意單元格后，即可直接輸入文本。

也可以按下 / 鍵或點(diǎn)擊加號，快速插入其他 Gutenberg 區(qū)塊，實(shí)現(xiàn)嵌套效果。

這種方式適合展示更復(fù)雜的內(nèi)容結(jié)構(gòu)，例如圖文混排、列表型數(shù)據(jù)、帶按鈕的價(jià)格表等。

表格行（Row）管理

每一行可單獨(dú)選中，通過工具欄中的箭頭調(diào)整上下位置。

點(diǎn)擊行尾的“+”按鈕，可快速在當(dāng)前行上方或下方插入新行，也可插入到最頂部或最底部。

每一行都支持獨(dú)立樣式設(shè)定，包括：

• 背景顏色與懸停背景顏色
• 行高（支持 px、em、vh）
• 響應(yīng)式顯示設(shè)定：桌面、平板、移動(dòng)端分別調(diào)節(jié)

表格列（Column）管理

表格中的每列以 Table Data 區(qū)塊呈現(xiàn)。

通過工具欄箭頭圖標(biāo)可移動(dòng)列位置；點(diǎn)擊加號圖標(biāo)則可新增列，插入于任意位置。

每個(gè)單元格支持設(shè)置獨(dú)立內(nèi)邊距（Padding），也可以進(jìn)行響應(yīng)式調(diào)整。

若需要精細(xì)控制每列寬度，可在表格設(shè)置中關(guān)閉「Auto Width」，手動(dòng)輸入百分比或像素值，提升在不同設(shè)備上的適配效果。

表格整體設(shè)置

在選中整個(gè) Advanced Table 區(qū)塊后，可對整個(gè)表格模塊進(jìn)行全局設(shè)定。

基本設(shè)置

• 行數(shù)與列數(shù)：可手動(dòng)調(diào)整
• 首行設(shè)為表頭：將 HTML 標(biāo)簽切換為 <th>，并自動(dòng)應(yīng)用表頭字體樣式
• 首列設(shè)為表頭：同樣適用于縱向數(shù)據(jù)列表

固定行列功能（需 Kadence Blocks Pro）

• 固定首行（Sticky First Row）：常用于長表格的標(biāo)題固定展示
• 固定首列（Sticky First Column）：適合參數(shù)型對比表

需設(shè)置最大高度或最大寬度字段，才能啟用滾動(dòng)條件下的固定顯示效果。

橫向滾動(dòng)

• 開啟 Overflow X 滾動(dòng)，可在移動(dòng)端或窄屏設(shè)備中橫向滑動(dòng)瀏覽表格內(nèi)容，有效解決列過多導(dǎo)致內(nèi)容被截?cái)嗟膯栴}。

樣式與視覺設(shè)定

Advanced Table 提供豐富的樣式配置，包括但不限于：

• 邊框：可設(shè)定顏色、粗細(xì)，并選擇是否僅作用于行
• 單元格內(nèi)邊距：統(tǒng)一或分別設(shè)置
• 字體樣式：支持字體、字號、顏色、行高、字重、字間距等控制
• 表頭樣式：可單獨(dú)為表頭配置字體風(fēng)格、顏色等
• 行背景：可設(shè)置奇偶行交替背景色，提升可讀性
• 列背景：支持為單列設(shè)置專屬背景色
• 行高：統(tǒng)一調(diào)整整體表格的行高

高級設(shè)置

• 可為整個(gè)表格區(qū)塊設(shè)置外邊距與內(nèi)邊距，方便進(jìn)行模塊間留白控制
• 可保存當(dāng)前配置為默認(rèn)設(shè)置，未來添加表格時(shí)自動(dòng)使用相同樣式
• 支持添加自定義 CSS 類名，適配更個(gè)性化的前端樣式需求

結(jié)語

Advanced Table 區(qū)塊結(jié)合 Kadence Blocks 插件提供的響應(yīng)式排版與區(qū)塊嵌套功能，使得構(gòu)建高度可控、美觀且實(shí)用的表格結(jié)構(gòu)變得更加輕松。

無論是展示服務(wù)套餐、課程時(shí)間表、對比功能、FAQ 解答，還是搭配電商模塊使用，Advanced Table 都能提供足夠的表現(xiàn)力與靈活性，是內(nèi)容排版不可或缺的組成部分。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息