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

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

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

發佈日期: 上次更新: 6 留言 8,554 瀏覽

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

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

於是我找到了這個線上的免費工具,幾分鐘就幫我把表格轉換成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

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

 

 

留言給帶路姬吧!

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文件,貼上之後都說是錯誤的

回答
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link

2021 網站帶路姬
有獎徵站!

只有這次!跟著免費的教學做網站&全民投票都有獎!
70,000 元大獎等你拿!
了解詳情
2021/11/1 ~ 2021/12/29
close-link
2021 帶路姬有獎徵站!七萬等你拿!