WP Table Builder 表格外掛教學2024最新版

WordPress 中建立漂亮的表格,我自己嘗試了不少個,WP Table Builder 是2024 最快速方便好使用的表格外掛,不用寫程式,又能有漂亮的外觀。

如何使用 WP Table Builder?

第一步:安裝 WP Table Builder

WP Table Builder 表格外掛教學

前往 WordPress 後台,安裝並啟用 WP Table Builder 外掛。

WP Table Builder 表格外掛教學

啟用之後,在後台工具列找到「表格產生器」,點選新增表格

第二步:新增表格

WP Table Builder 表格外掛教學

接著決定你的表格是要幾乘幾的,例如我想要一個 5 x 10 的表格,按下確認之後表格就會產生出來。

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 6
WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 7

左側邊是工具列,可以放置的元素分別有:

  • 文字
  • 按鈕
  • 圖片
  • 清單
  • 評分
  • Custom HTML
  • 短代碼 ( Shortcode )

第三步:設定表格

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 8

要編輯表格相當容易,直接將左邊的元素拖曳至表格中即可,這邊就依照你想要放什麼做決定。

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 9

編輯表格完成之後,你可以在右上角按下 儲存表格 與 預覽,相當方便。

經過一番編輯後,就可以看到在電腦版上表格的樣子,目前看起來相當不錯。

第四步:調整手機版

但到手機上觀看時,你可能會發現,怎麼擠成一團了?這樣子使用者沒辦法好好閱讀。

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 12

為了要修正在手機版上擠成一團的問題,我們必須固定每個表格的寬度,接著點選左工具列 Settings 中的 Manage Cells

如果你找不到 Manage Cells 的話,這是因為你的外掛版本比較新,目前這個選項已經移至上方改叫管理儲存格了。

接著你會進到另一種表格編輯的模式,在這個模式之下你可以新增、刪減表格的數目,以及調整表格的長、寬度。

點擊最上面的第一個表格內容,你會發現它目前有一個淡淡的綠色圍繞著。

這邊操作要注意,要注意你的淡綠色是不是只有 1 個框框有,如果有 2 個框框有淡綠色,接下來會無法進行,必須點選其中一個淡綠色框框進行消除。

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 15

在這個淡綠色圍繞的情況下,將左邊側邊攔出現的數值依序調整:

  1. 自動改為固定
  2. 寬度調成 96 px

寬度的部分,96px 是對我而言我視覺上最舒服的寬度數值,你可以參考看看,不一定要用我的。

將最上面的 5 格表格都進行 Step 11 的動作,就可以按下關閉,回到原本的編輯模式。

這時候一樣儲存表格並預覽,在電腦中看起來有稍微小改變,但你在手機中就會發現它不會擠在一起了,變成是可以滑動往右邊的方式。

如此一來你的表格便確認完成了,這時可以在左上角為你的表格命名,並儲存表格。

第五步:將表格插入文章中

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 19

點選右上角的 EMBED,會出現表格的短代碼,接著複製這段短代碼。

到你要插入的文章中,新增一個短代碼的元素,將剛剛複製的短代碼貼上去,並按下更新。

最後,你就可以在文章中看到你精心製作的表格了,並且記得再次確認手機版有沒有跑版的問題,如果都沒有就大功告成了!

從 TablePress 匯入表格

WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 22
WP Table Builder 表格外掛教學,5 分鐘讓你做出清楚好懂的表格 | 23

如果你跟我一樣是 TablePress 的用戶,官方也很貼心的設計了從 TablePress 一鍵匯入表格的功能,讓你無痛從 TablePress 轉成 WP Table Builder

發佈留言

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

Scroll to Top