網頁插入表格不再麻煩﹍線上產生器+ 可匯入CSV 檔(Tables ...

三、搭配RWD 表格外掛 · 因為RWD 外掛Basic Table 本身自帶CSS 樣式，因此只需要陽春表格HTML 語法即可 · 按照本篇表格產生器Tables Generator 流程製作完 ... 服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2018年10月16日 網頁插入表格不再麻煩﹍線上產生器+可匯入CSV檔(TablesGenerator) WayneFu 電腦-網頁設計-表格,電腦-網路雲端-線上工具 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 前陣子剛好多位讀者、客戶都詢問這件事： 如何在文章中插入表格，且能正常顯示，版面不異常？ 如果對HTML語法不熟悉的話，網頁要插入表格的確沒那麼容易。

過去曾寫過「Blogger插入表格的最佳流程+自適應寬度」，文章內容不短，但是瞭解原理、操作熟悉後，經由Google試算表或Evernote轉換，不用幾秒鐘就能成功將表格插入文章。

這樣的流程算滿方便的，而副作用會是「產生大量行內(inline)CSS字串」，導致文章字元數暴漲，若表格太長時有可能導致Blogger文章無法儲存(超過字元數上限)。

雖然該篇文章有提供解決的作法，不過本篇還是來介紹一下產生正統表格語法的作法，藉由免費的線上表格產生器自動生成乾淨的HTML語法，還能方便地匯入CSV檔產生表格，從此製作表格不再麻煩。

一、簡易表格產生器 以下這兩篇文章，分別介紹了兩個國外的線上表格產生器： HTMLTableGenerator網頁表格製作工具 RapidTables 不會程式碼也會用『HTMLDIV線上表格產生器』快速拖曳欄位 DIVTABLE 因為都是國外的網站，因此英文苦手的話還是可以看一下中文的介紹文章。

這兩個產生器都適合用來製作簡單的表格，而後者尤其適合無腦操作，用滑鼠直接就能拖曳出表格的大小，不必手動設定。

二、最佳表格產生器(TablesGenerator) 本篇要介紹的是，WFU認為最強悍的線上表格產生器： TablesGenerator 這個線上產生器的功能之多，遠勝前面2個產生器，無論小型表格，或想要製作更美觀、更大型的表格都沒問題。

1.製作表格 如果要製作15x15以內的小型表格，可以直接用滑鼠拖曳。

如上圖操作，選單Table→Setsize→進行拖曳即可 如果要製作大型表格，請點擊選單File→NewTable 出現上圖彈跳視窗，可輸入最多500列、20欄。

2.產生表格語法 最重要的一點，請按上圖紅框的「HTMLTables」分頁，才能產生HTML語法。

編輯完表格內容後，按「Generate」可立即看到HTML語法。

需要注意的是，如果勾選「DonotgenerateCSS」不產生CSS語法的話，下面可看到非常乾淨的表格HTML語法，可以作為學習之用。

但建議不要這麼做，請按一下右下角的「Preview」就知道了，這是個陽春表格，連框線都沒有喔！ 總之，要複製語法之前先看Preview預覽效果，滿意後再帶走語法。

3.套用樣式 這個網站準備了一些美觀的現成樣式可以套用，請按右上角的「Theme」按鈕： 分別有Color(色系)、Border(框線)、Stripes(條紋)可以設定樣式，選定後按右上角「Close」關閉即可。

取消勾選「DonotgenerateCSS」，按下「Preview」： 確認樣式無誤，就可按「Generate」把下方語法複製帶走了。

4.匯入CSV檔 如果表格已經在別處做好(例如Excel)，可以先匯出存成CSV檔，然後進入此網站，點擊選單File→ImportCSVfile 選擇檔案後，按「Import」即可匯入表格內容，後續處理同前述步驟。

如果是用Word或其他軟體製作了表格，那麼可以先將表格內容複製到試算表(或EXCEL)，然後接續前述流程即可。

三、搭配RWD表格外掛 如果想讓表格有RWD效果，之前介紹了一個很棒的jQuery外掛「輕鬆做出美觀的自適應RWD表格(BasicTable)」，搭配這個外掛的操作流程如下： 因為RWD外掛BasicTable本身自帶CSS樣式，因此只需要陽春表格HTML語法即可 按照本篇表格產生器TablesGenerator流程製作完表格後，記得勾選「DonotgenerateCSS」不產生CSS語法 將表格語法複製到網頁，再安裝外掛BasicTable即可展示RWD效果 除此之外，如果表格需要排序效果的話，可參考這篇： 讓網頁表格能自動排序﹍TableSorter安裝懶人包(CDN) 更多「表格」使用技巧： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-網頁設計-表格 電腦-網路雲端-線上工具 WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 2則留言: LawyerFu2018年10月16日下午4:46收藏先，这个绝对实用。

感谢推荐。

回覆刪除回覆回覆Onilago歐逆拉勾2018年10月17日凌晨12:28非常感謝分享線上表格製造網站，這就是我正好在找的工具!!💞回覆刪除回覆回覆新增留言載入更多… 張貼留言注意事項： ◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (18) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (6) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (6) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (6) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (8) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (7) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP