【WordPress 實用教學】,TablePress 讓你做出簡單又齊全的表格設計

文章更新日期 2021-11-13

表格,是一種可視化交流模式,也是一種整理數據的手段。透過表格可以立即知道想要的結果,不需參透許多複雜的文字訊息,表格通常廣泛應用在資訊交流、科學研究以及數據分析。此外,不同的使用方式,也會造就表格之間的差異,因此在我們日常生活中,也伴隨著許多形形色色的表格

如果文章中有插入整理表格,多少會提昇閱讀者的閱讀體驗…

為什麼文章要有表格?

也許你曾經逛過商品評價的網站,或者是旅遊資訊整理,不難發現這些網站管理者,在撰寫文章的同時,都會穿插簡單的表格以供閱讀

表格是文章中的精華,也是重點中的重點,當你不想反覆閱讀冗長的文章內容時,如果有穿插簡單的表格,試問,你是不是很容易明瞭文章內容的要點?對於讀者來說,容易快速找到重點,就會提昇閱讀品質,這樣的文章也容易與讀者產生共鳴

筆者在撰寫文章時,想利用區塊編輯器【古騰堡編輯器】內建的表格製作,可惜做出來的效果不佳,使用上也非常的不便,因此在本文當中,筆者推薦一款 WordPress 製作表格的外掛,TablePress,讓我們繼續看下去…

筆者實在不推薦使用,區塊編輯器的內建表格…

TablePress 安裝設定

Step1.TablePress 安裝

  • 後台安裝:搜尋外掛 TablePress 安裝啟用即可
  • 遠端安裝:下載 TablePress『點我』 ,用 FTP 上傳安裝啟用

Step2.TablePress 設定

  • 表格標題橫列:表格的第一個橫列是標題列【打勾】
  • 橫列交替背景:交替變換連續橫列的背景顏色【打勾】
  • 游標經過突顯:利用改變背景顏色,來突顯所選橫列【打勾】
  • 使用 DataTables:啟用 DataTables JavaScript 功能【取消】

先製作新的表格,就會出現上圖那些選項。若你還想要製作擁有排序、搜尋、上下頁的表格,可將 DataTables 打勾

TablePress 使用教學

Step1.點選新增表格

Step2.輸入表格名稱、調整表格欄位

筆者溫馨提醒:橫排=列,直排=欄【行】

Step3.輸入表格內容

  • 紅框處:代表表格顯示的標題列
  • 1、2、3:代表列
  • A、B、C:代表欄【行】

Step4.表格內容完成

Step5.選擇連結文字

將連結網址輸入在網址欄位,打勾新分頁中開啟連結,接著儲存表格

Step6.合併儲存格

先點選 3 號欄位,接著點擊合併儲存格:在一列內【rowspan】按鈕。 3號欄位就會被合併到 2 號欄位

TablePress 功能當中,插入文字連結部份、合併儲存格【列、欄】比較困難,因此筆者錄個簡單的影片,加上圖文說明,希望能讓讀者容易的學會 TablePress

將表格內容、文字連結【有需要的話】、合併儲存格【有需要的話】都設定好,最後將表格儲存設定即可

Step7.複製表格代碼

Step8.新增區塊段落

Step9.貼上表格代碼

Step10.前台顯示效果

TablePress 匯出匯入

Step1.TablePress 匯出

如果選擇 CSV、HTML 格式,只會將數據資料匯出,整個表格不會匯出!

Step2.TablePress 匯入

匯入已經做好的 Excel 檔 XLS、XLSX,或匯入 TablePress 格式 JSON 檔案

TablePress 的優缺點

1.TablePress 的優點

  • 製作表格簡單、實用,易上手
  • 可以將做好的 Excel 檔,直接匯入檔案
  • 可製作排序、搜尋、上下頁功能的表格

2.TablePress 的缺點

  • 不建議建立太多列與太多欄
  • 只能匯入 Excel 檔,無法匯入 Word 檔
  • 功能上沒有 Word、Excel 來的強大

TablePress 表格示範

TablePress
外掛優點1.製作表格簡單、實用,易上手
2.可以將做好的 Excel 檔,直接匯入檔案
3.可製作排序、搜尋、上下頁功能的表格
外掛缺點1.不建議建立太多列與太多欄
2.只能匯入 Excel 檔,無法匯入 Word 檔
3.功能上沒有 Word、Excel 來的強大
使用避免1.不要把表格當成是寫文章一樣塞入過多的文字
2.欄位建議最多不要超過四個,最好是三個直欄
3.避免將圖片或影片插入文字內容,不利 SEO

結論

由上述的優缺點看來, TablePress 適合做個簡單重點式,能夠快速讓讀者了解到重點、結果分析的表格。加上能夠匯入 Excel 檔,或許這才是 TablePress 廣泛被利用的原因

如果想要利用 TablePress 做出跟 Word、Excel 相同的效果,那麼非常的不建議這樣做,即使花了一段時間做出很漂亮華麗的表格,如果在電腦版、手機版上閱讀非常的不清晰,甚至很模糊,那麼漂亮華麗的表格非常不利 SEO。閱讀體驗才是最重要的!

Previous Post

【室內親子景點】進入天文科學教育館,開啟你全新的探索欲望

Next Post

【照片小技巧】怕被盜圖?利用 Watermark 幫你的照片加上浮水印吧!

38 comments

  1. Luminwu表示:

    寫的太詳細了,也幫了我很大的忙
    謝謝你的表格教學,我又增長知識了!!!

  2. Zihan Chen表示:

    這篇對我來說很有用喔,對於使用wordpresst的我來說,TablePress真的很常用。

  3. dio表示:

    很用心的教學文章,感謝分享。

  4. 民樂電腦表示:

    感謝你的肯定,能幫助到你,是我的榮幸

  5. 潔西卡表示:

    我很喜歡用表格將複雜的資訊簡單化,這篇很實用!!
    想問未來會不會有表格更改顏色相關的進階文章?

  6. 民樂電腦表示:

    感謝你的肯定,能幫助到你,是我的榮幸

  7. 民樂電腦表示:

    感謝你的肯定,能幫助到你,是我的榮幸

  8. 民樂電腦表示:

    哈哈,有機會我研究看看

  9. Dean表示:

    我還在思考要不要安裝TablePress耶,因為現在外掛已經爆多,怕再裝一個會拖垮網站速度QQ
    不過這篇真的整理的很猛,先收藏再說!

  10. Buzz表示:

    感謝版主的不藏私文章!

  11. 民樂電腦表示:

    如果有製作表格的需求,TablePress是首選,怕安裝太多外掛?你可以參考我外掛彙整文章,裡面有說明建議

  12. 民樂電腦表示:

    不客氣,希望能夠幫助到你

  13. Roy表示:

    越是簡單,越是不簡單,謝謝版主提供的資訊,原來操作步驟是這麼的簡單啊!

  14. 民樂電腦表示:

    哈哈,是ㄚ,表格真是不錯用,有機會你可以試試

  15. Lily表示:

    這…很實用!之前想在文章裡加入表格…但內建的太難用了,只好放棄!

  16. 民樂電腦表示:

    是ㄚ,內建的實在太難用了,所以我就打算研究後寫教學分享

  17. 林博正表示:

    謝謝版主!
    非常淺顯易懂的文章
    幫助了我這個電腦白癡~

  18. cloud表示:

    最近很多文章都需要做表格,這篇剛好可以參考實用,
    說真的原本的表格有時不太好使,謝謝分享啦!

  19. 民樂電腦表示:

    不客氣唷,能簡單幫助到你,是我的榮幸

  20. 民樂電腦表示:

    不客氣唷,能簡單幫助到你,是我的榮幸

  21. leochen表示:

    您好 請問tablepress有沒有簡易的CSS教學呢?
    比如說改框線線色或是字體大小置中等等?

  22. 民樂電腦表示:

    目前這外掛沒這些功能,TablePress以簡單實用為主

  23. JC YANG表示:

    TablePress真的是簡單好上手,可惜它無法調整相關格式如置中、編排字型大小,
    若未來有更強大的表格幫手,希望版大能分享喔,謝謝。

  24. 民樂電腦表示:

    好的,如果有機會測試,也許會寫個教學出來

  25. Mia Liao表示:

    表格好重要,特別是要最後總結的時候,直接看表格一目了然!

  26. 民樂電腦表示:

    是ㄚ,文章中插入表格,真的對於閱讀體驗非常有幫助

  27. howard表示:

    表格超重要阿 感謝版主(磕頭

  28. 民樂電腦表示:

    不客氣唷,能幫助到你,是我的榮幸

  29. RONG表示:

    表格太重要了,只是還有點不習慣不能在文章中直接編輯,不過我會慢慢適應的~~!感謝分享!!!

  30. 民樂電腦表示:

    表格對於文章非常的重要,一定要適應的

  31. 波德表示:

    感謝分享

  32. 民樂電腦表示:

    不客氣唷

  33. Jamie表示:

    版主你好,想請問第2步的tablepress設定在後台哪邊呢?
    我已經安裝好,但始終找不到版主文章中所說的設定的地方…

  34. 民樂電腦表示:

    你好,文章中有提到,可以先簡單製作一個新的表格,接者就會出現以下選項了

  35. Jamie表示:

    我看到版主說先新增表格了!!非常不好意思,一開始沒注意到!

  36. Tammy表示:

    哈哈,沒關係,有找到就好,能幫助到你就好

Scroll to top