WordPress教學功能外掛網站製作

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

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

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

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

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

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

 

 

標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

相關文章

4 則留言

發佈留言

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

Back to top button
★ 完全免費的影音+圖文教學+ ★

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

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