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

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

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

WP Table Builder下載與安裝方式

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

官方下載連結:

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 列。

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

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

管理表格

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

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

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

Backround

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

設定 (Settings)

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

基本編輯

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

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

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

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

RWD 響應設置 (Responsive)

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

內嵌代碼 (EMBED)

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

這代碼在一開始所有表格中,亦可進行查詢與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 這個前置設定。

【教學】WP Table Builder好用的Table表格外掛推薦 table外掛, wordpress table, wordpress 表格, wp table builder, wp table builder教學, 表格外掛

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

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

打造網路賺錢基地 實戰課程

▲ 讓你擁有一個能帶來現金流的網路賺錢基地,建立網路收入之路,實踐打造網路賺錢基地的策略與技巧 !

其他 WordPress 網站架設 相關文章推薦

  • 【教學】免費收發域名郵件教學 Cloudflare 郵件轉址與使用 Gmail 郵件收發域名信件 !
    這篇文章將教你如何免費使用你自己的域名郵件。通常,使用自己的域名來發送和接收郵件需要支付費用,但透過 Cloudflare 和 Gmai l,就可以免費實現這一目標。這不僅節省了費用,還提供了一個方便快速的解決方案。
  • 【教學】Rank Math 功能強大的 SEO 外掛功能 ! Rank Math 使用教學 !
    Rank Math SEO 是目前使用上最好的 WordPress SEO 外掛,在這外掛程式中結合了許多 SEO 工具的功能,可幫助我們在寫作時,網站建立時,去貼近 SEO 規則,增加流量。
  • 【教學】WordPress 防止垃圾留言 Akismet Anti-Spam 設定教學
    數以百萬的使用者採用 Akismet,它是保護網站遠離垃圾留言的絕佳方式。Akismet 是 WordPress 使用者幾乎都會安排的一套防止垃圾留言的外掛工具。而且免費的功能,幾乎就已經可以完完全全協助防止 99.99% 的垃圾留言 ! 功能如此強大,怎麼可以不使用在自己的網站呢 ?
  • 【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學
    Table of Content Plus,一個強大且方便使用的文章目錄自動產生工具。如果你和我一樣,對網頁程式碼一竅不通,又希望可以有簡單、快速的方式建立文章目錄,那 Table of Content Plus 你就不能不知道 !
  • 【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !
    許多主機服務商都會有提供一個叫 Staging Site 的功能,也稱之為臨時網站。這功能可以幫助你在想更新網站時,幫你複製出一個完全相同的臨時網享,讓你在更新網站內容時,不必怕更動到網站目前的現況,就算是大幅度的更新,也不用怛心。在這篇內容中,將會和你快速分享有關 Cloudways Staging Site 功能的使用詳細流程,幫助你無痛更新你的網站內容。
  • 【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !
    使用 Post SMTP 這個外掛,可以幫助你的網站進行郵件的發送,Post SMTP 是一套非常簡單使用,功能又特別強大的一個寄件外掛,讓你的 WordPress 網站,可以讓訪客在網站上完成某些動作時,即進行郵件的推播與發送,進而維持好與訪客之間的互動。Post SMTP 的設定方式很簡單,接下來就帶你來一步步完成吧 !
  • 【教學】Cloudways 如何設定域名信箱 Domain Mailbox
    Cloudways 是我目前使用最穩定的網站主機,價格、服務、性價比 … 等等,在比較之下,真的都沒話說。而長期使用之下,你一定會需要建置一個 域名信箱,在使用 Cloudways 的情況下,如何快速的為自己建立出 域名信箱,在這篇教學中,將會完整和你分享 Cloudways 如何設定域名信箱,讓你從無到有一次完成 !
  • 【Divi教學】Divi主題 SEO 基礎設定說明,簡易SEO功能介紹
    Divi主題之中,針對SEO的功能有著其基礎設定。在這次divi教學裡,將會教會你如何將divi主題裡的SEO功能進行基礎設定,這在divi教學中可則是非常基礎的一課。了解基礎設定後,後續若要使用其他SEO外掛,也就更能明白為什麼需要如此設定。你也可以選擇直接使用SEO外掛,在divi主題中,可以直接與外掛相支援。
  • 【Divi教學】Divi主題 Navigation 導航選項設定
    Divi主題之下,可以透過原本的divi主題設定,來決定導航列(Navigation)所能夠呈現的功能。在這篇文章中,將詳細和你說明在Divi主題下的設定中,導航列的所有相關設定方式。
  • 【Divi教學】Divi主題Options基本設置選項教學
    在divi主題中,由於沒有中文版本,有中文的版本在使用上常遇到更新就變的無法使用。 在這整理divi主題的使用細節,來幫助更多喜好使用divi主題的人,可以有一個正常參考的地方。 文章在一樓喔
  • 【分享】如何進行網址域名移轉?NameCheap移轉至Gandi實際操作經驗分享
    網站域名服務商很多,你是不是曾經有過,早知道選xxx家就好了的心情呢?其實如果已經在某家買好域名,是可以進行移轉的,今天這篇內容,就是和分享,域名移轉時,你需要注意的事項。
  • 【教學】WP Table Builder好用的Table表格外掛推薦
    近期在協助客戶架設網站時,因為需要表格來整理資訊。查到這一款Table外掛WP Table Builder,很好使用,呈現的效果很不錯。簡單整理使用方式,提供給有需要的你。

About Joyy

網路行銷玩家
現任職於顧問公司擔任行銷。分享許多網路行銷與網路賺錢相關知識 ! 期待透過更多免費的分享,讓更多人學到如何有效的從網路上建立屬於你自己的收入來源。

粉絲專頁

最新文章

Udemy 線上課程

1 則留言

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

    • A

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

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

    • A

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

留下您的問題: