首頁 WordPress 教學 自動生成RWD的表格的免費線上工具

自動生成RWD的表格的免費線上工具

終於可以有漂亮的表格啦!

發佈日期: 上次更新: 6 留言 11.1K 次瀏覽

這幾天在幫客戶製作一個活動網頁,其中一個區塊,客戶需要放一個表格來呈現議程內容,這個表格在電腦上看起來很正常也很漂亮,但在手機上就太擁擠不好看…

那要怎麼辦呢?要怎麼把複雜的表格變成在手機上也好看呢?

於是我找到了這個線上的免費工具,幾分鐘就幫我把表格轉換成RWD的版本了喔!

不過,這個技巧還是需要稍微懂一點點HTML/CSS程式的朋友們用,新手們可能不太適合喔!

製作RWD表格的三種方式:

1. Enter Data 手動輸入表格內容來產生RWD表格

填入你需要的列數與行數,並且填入表格內容,他就會把產生的表格程式碼顯示在HTML output裡面喔。

2. Paste From Spreadsheet 從Excel,或Google表格來產生RWD表格

從 Excel 去複製欄位,貼到這個工具裡就可以在HTML output的地方得到RWD的表格的程式碼。

3. 貼入一般表格來產生RWD表格

我自己是用這個方式喔,只要貼入任何的表格的程式碼,他就自動幫你轉換成RWD的程式碼喔!

最重要的來了!不論你用上面哪一種方式產生RWD表格的程式碼,記得需要補上自訂的CSS到你的主題裡。我是直接把CSS貼到Visual Composer在文章裡的自訂CSS的地方,就可以了。

➡️ 自動轉成RWD表格的免費線上工具

https://ianrmedia.unl.edu/responsive-table-generator-tool

希望這個工具對大家的表格有幫助喔!

 

 

留言給帶路姬吧!

* By using this form you agree with the storage and handling of your data by this website.


6 留言

Facy 2018-09-03 - 10:42 下午

這個也是一種線上表格工具,也可以參考一下 https://study.smallway.tw/wordpress-solution/excel-table-to-rwd-table/

回答
Erin Lin 2018-09-07 - 1:31 上午

好哦!我也來玩玩看喔!謝謝你的分享喔!

回答
steven 2019-03-01 - 12:34 下午

非常有用的RWD程式碼轉換,謝謝!!

回答
網站帶路姬 / Erin Lin 2019-03-05 - 4:41 下午

不客氣喲 ^^

回答
amanda 2020-12-09 - 11:42 上午

請問,如果我是商品的頁面尺寸表,有30種商品,用的是elementor,那我該把css放在哪裡呢

回答
amanda 2020-12-09 - 12:05 下午

而且我下載的css文件,貼上之後都說是錯誤的

回答
訂閱電子報 (週四寄)
帶路姬的文章重質不重量,所以請訂閱我的電子報,以確保會收到更多優質教學好文喔!
聯盟分潤聲明

此站內容為Erin的真實架站經驗分享,部分推薦的商品有參加 聯盟計畫,您若點選文中的連結而購買商品,Erin可以從中獲取一點分潤。不過Erin 100%保證,只誠懇推薦自己親身試用過的好東西。(什麼是聯盟計畫?)

支持帶路姬

假如你很喜歡帶路姬的文章,希望鼓勵帶路姬繼續寫作,幫助WordPress新手,與推廣WordPress,不如贊助一下帶路姬吧!

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,614,479(2024/2/2)
總訪客量:626,454 (2024/2/2)

© WordPress 網站帶路姬 2018~2025 版權所有 |  本站使用 Soledad主題 + Elementor Pro 編輯器   | 推薦使用 Cloudways主機

本網站使用 Cookies 來提升您的使用體驗。我們將假設您同意這項安排,但如果您希望,您可以選擇拒絕。 接受 閱讀更多

帶路姬熱銷書籍