WP-Table-Builder好用的Table表格外掛推薦

【教學】WP Table Builder好用的Table表格外掛推薦

作者:Joyy 志強

發佈日期:2022 年 05 月 25 日

首頁 E WordPress 網站架設 E 外掛 E 【教學】WP Table Builder好用的Table表格外掛推薦 ( Page )

WP Table Builder是一款非常好使用的表格外掛。直覺式的建立方式,讓你在短時間3分鐘之內,也可以整理出美美的外掛。WP Table Builder也有提供付費版本。而Joyy在使用體驗後發現,在免費的版本上,就可以滿足大部分的使用需求囉。在這篇內容中,我將和你分享WP Table Builder的使用方式與我發現到的注意事項,希望可以幫助到正在找尋Table表格外掛的你,如果有任何問題,歡迎你在下方留言處留言讓我知道唷!

WP Table Builder下載與安裝方式

WP Table Builder是WordPress上熱門外掛,可以直接到外掛安裝直接安裝啟用外,也可以透過官方下載連結來進行。

官方下載連結:

WP Table Builder相關使用教學

安裝並啟用之後,點擊『新增表格』就會切換到外掛的操作介面。

WP Table Builder好用的Table表格外掛推薦_03
(點圖片可放大)
  1. BASIC:免費版的基本工具,登文字、按鈕、圖片…等基本工具,拖拉至中央表格處,就可使用囉。在免費版本就有提供短代碼、與自定 HTML,算是給予免費使用的用戶非常佛心的功能。
  2. 表格命名:這裡可以給予目前這張表格一個命名。
  3. 功能頁縮放:用來把表格功能頁縮入左邊。
  4. 關閉 WP Table Builder 外掛:點此就會回到 WordPress 後台。
  5. Blank:表格編輯位置,點擊中間的『+』即可開始編輯。
  6. Setting 與 Responsive:設定表格與 RWD 顯示。(這部分在下方進行說明)
WP Table Builder好用的Table表格外掛推薦_04

上方數字和左方數字,就是用新增 Col 欄與 Row 列。

輸入完成所需要的 Col 與 Row 後,就會自動帶出表格。

此時每一格都會自動先添入編輯物件 文字方塊 Add Text。

管理表格

點擊上方 『管理表格』,即出現下圖

圖中紅框處,可以針對現有表格,快速增加其他欄、其他列的表格數量。

單點擊某一欄位時,下方會出現插入欄位與上方紅色按鍵的刪除欄或列等功能。

左方的功能表,則可以針對欄位中的高度、寬度、與內容位置進行調整。

點擊綠色 Close 鍵,則是離開管理表格畫面。

Backround

點擊 Backround 則可以針對表頭 Header 與單數 Row 和雙數 Row 進行背景顏色的設置。

設定 (Settings)

這裡的Settings,是針對整個表格進行相關的設定。主要設定上,會以General一般設定Border邊框比較常用。這部份你可以自己調整看看,為你的表格設計出一個獨一無二的樣式。

基本編輯

WP Table Builder好用的Table表格外掛推薦_11

在編輯時,若格子中有物件,將會顯示出可移動、複製與刪除等動作。

WP Table Builder好用的Table表格外掛推薦_17

在拖拉時,若移至別格之中,也會顯示出 Above (之前) 與 Below (之後) 的顯示,方便我們在編輯時進行判斷。

RWD 響應設置 (Responsive)

在Responsive的設定時,可以看到上方有標示出 Mobile(手機版)、Tablet(平板)、Desktop(桌機)等選項。

在左方,點選Enable Responsive Table則上進行設定。

在Mode Options中,則可針對不同的顯示方式,做不同的表格呈現設定。

內嵌代碼 (EMBED)

完成所有的設置後,按下 EMBED(內崁代碼),則會顯示這個表格可使用的短代碼,這時就可以插入至文章或任何指定的頁面之中囉。

這代碼在一開始所有表格中,亦可進行查詢與Copy,方便進行內崁的設置。

合併儲存格 (Merge)

使用 Wp Table Buider 在表格的處理上,是可以進行合併 (Merge) 與分割 (Split) 的。方式很簡單…

wp table builder 如何合併儲存格_01

滑鼠左鍵點擊欲合併的儲存格。

wp table builder 如何合併儲存格_02

按下 Shift 鍵,點擊下方儲存格,此時在 WP Table Builder 上,會顯示出二塊都是淺藍色斜線的狀況,如上圖位置 ①,這時 Merge 合併功能鍵將會亮起,即表示可以進行 2 個儲存格進行合併動作。

wp table builder 如何合併儲存格_03

合併完成後,原本 2 個儲存格中的內容,將會併排在一起,即可完合併。而分割則是反過來操作即可喔。

WP Table Builder注意事項

我們在網站設置中,一定都會使用到『錨點』這個功能。但Joyy試過,若是使用WP Table Builder的『Button』時,是無法在Button這個物件中的Link點,設定『錨點』。

WP Table Builder在Button的Link設定時,是會強制代入 https 這個前置設定。

所以,若你在表格中,需要移至錨點,就必須使用Text物件,並在Text物件中,去在URL加入相關的錨點設定喔。

希望上述這些簡易的教學,可以為你在選擇使用表格外掛時,可以更進一步了解WP Table Builder的使用,若使用上有任何的問題或想和我交流的,可以在下方留言處留言讓我知道喔。

推薦閱讀 ▼

【Divi教學】Divi表單如何設定Google reCAPTCHA

【Divi教學】Divi表單如何設定Google reCAPTCHA

網站建置中,一定會放置聯絡表單,或是可供訪客進行需求詢問的填寫位置。但總是會有些有心人,透過惡意程式,強制填寫,而收到一些亂七八糟的廣告訊息。其實安裝Akismet外掛,就可以防阻絕大部分了。可是如果網站開始有營利,對於Akismet來說,就會希望網站在使用上,需要開始付費。這時可以改用Google提供的服務 reCAPTCHA 來為自己的網站加入防護,來減少惡意留言訊息的發生。 什麼是Google reCAPTCHA...

【Divi教學】Divi Breadcrumbs外掛使用教學

【Divi教學】Divi Breadcrumbs外掛使用教學

這篇將和Divi主題的使用者們,快速分享Divi Breadcrumbs外掛的使用方式。其實要做到Breadcrumbs麵包屑導覽的效果,方式很多種。前一篇有分享過使用RankMath的方式來達成,但使用Rank Math的方式,可以編輯調整的效果就有限。所以,利用Breadcrumbs專用的外掛就能輕鬆修改囉。 下載Divi Breadcrumbs並安裝 二種方式進行下載與安裝。 ①從WordPress Plugin網站直接下載後安裝,點擊下方Get this plugin下載即可。...

Cloudways Migrator快速搬家圖文教學

Cloudways Migrator快速搬家圖文教學

Cloudways目前可以算是最熱門,最多人在推薦使用的Hosting主機。我自已也是在試用後,發現他真的超好用的。而在決定換到Cloudways之後,原本使用的主機已經有太多文章、頁面、媒體…一定沒有人想重頭再來一次。主機搬家在Cloudways WordPress Migrator這個外掛,就為你解決這個煩惱,幫助你完整搬移。現在就跟著以下圖文的教學,一步步進行搬移吧。 完整使用教學步驟 請務必依照以下流程方式,才可以進行完整的搬移工作喔,每一步驟均會附上圖文說明,請一定要要留意每一步驟喔。 Cloudways開啟Server...

4 Comments

  1. daisy

    你好,想請問設計好表格後用短代碼插入,但是會造成整個文章消失,請問該怎麼辦??

    Reply
    • Joyy志強

      請問一下,你嵌入代碼的方式是怎麼處理的呢 ? 是用一般文章的短代碼工具插入的嗎 ?

      Reply
  2. daisy

    你好,想請問設計好表格後用短代碼插入,但是會造成整個文章消失,請問該怎麼辦??

    Reply
    • Joyy志強

      請問一下,你嵌入代碼的方式是怎麼處理的呢 ? 是用一般文章的短代碼工具插入的嗎 ?

      Reply

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *