把excel表格直接貼上並自動轉成響應式(RWD)表格的線上產生器

在WordPress想要製作響應式表格,除了靠Elementor或一些專用的表格外掛之外,另可以使用另一種非常方便的「RWD表格線上產生器」。

你可以在excel先把表格做好,再貼到這個「RWD表格線上產生器」就能自動產生響應式(RWD)表格了。

RWD表格線上產生器 : http://www.tablesgenerator.com/html_tables

1、先在excel中把資料打好,並選取好範圍後先右鍵複製。

2、前往「RWD表格線上產生器」並如下圖

3、直接貼上剛剛複製的並按下Load

4、有表頭需要合併的話可以先合併

5、你可以替表頭(點擊第一個單元格,按住左鍵,往右拖,即A1~G1的儲存格)設定一下背景或字色

6、做好表格後,點擊表格下面的Generate按鈕,再按下make the able responsive,替表格加上響應式功能。

7、複製代碼

7.1上圖中①處

7.1.1 請複製上圖中①處的CSS碼,注意不要複製到<style>與</style>

7.1.2 安裝此外掛【WP Add Custom CSS】,它可以讓你每篇文章後面都可以自訂CSS。

7.1.3 安裝外掛【WP Add Custom CSS】之後,在編輯該篇文章的末端(如下圖),貼上剛剛在上圖中①處的CSS碼。

7.2 上圖中②處複製好,貼到文章中,如下圖在「文字」模式中貼上。

8、存檔並在前台觀看結果

▼這是經上面流程後的畫面,你可以縮放瀏覽器的寬度來看它的變化,應會發現它的文字都會很適中的呈現且並不會超出螢幕範圍

外掛 簡介 費用 語系 相關教學
【Smartsupp Live Chat】 中文線上即時客服,線上即時對答。訪客屏幕錄製,在您的商店中觀看訪客的行為。你看到他的屏幕,鼠標移動,點擊和他填寫的表單。 免費 付費 本站 外站

▼這是excel表格複製直接貼到文章中的畫面,你可以縮放瀏覽器的寬度來看它的變化,應會發現它的文字會擠在一起且很不好閱讀。

外掛 簡介 費用 語系 相關教學
【Smartsupp Live Chat】 中文線上即時客服,線上即時對答。訪客屏幕錄製,在您的商店中觀看訪客的行為。
你看到他的屏幕,鼠標移動,點擊和他填寫的表單。
免費 付費 本站 外站

▼直接截圖一下做比較

是不是差很多,對吧!

這個「RWD表格線上產生器」超實用,可要好好收藏一下喔!

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: smallway.tw@gmail.com
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言