2019年5月19日

讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

Wayne Fu 0 A+
web-table-sort-html-generator.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)之前寫過一篇「讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」,只要安裝這個外掛就能達到排序的效果,看起來非常方便。

但最近接到的需求除了要讓表格排序,還得讓案主知道怎麼做出表格來,這下就麻煩了,因為很多站長其實不熟悉 HTML 碼,自然也不知道表格 Table 的正規 HTML 格式會是什麼樣子。

所以我之前也寫了一篇「網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV 檔」,讓製作表格不再是困難的事,什麼都不需要懂,就可無腦產生表格語法。

不過困難的還在後頭,因為這個「表格自動排序」的外掛,只吃特定格式的表格 HTML 碼,所以得想辦法讓案主做出特定的 HTML 碼才行。

因此本篇會找出一個順暢的操作流程,來操作各種線上工具,產生表格的 HTML 碼,最後再套用排序外掛。

(圖片出處: photo-ac.com)


一、表格範例


web-table-sort-html-generator-1.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

本篇以上圖範例的表格內容來進行流程,示範如何做出這種形式的表格,並進行排序。

完成效果大致像這樣:

2019高雄生日餐廳優惠
No 餐廳 價格 區域 地址 優惠
1 墨吉日式 $500↑ 左營 富民路160號 送小蛋糕
2 巴蜀大將 $300↑ 三民 鼎山街225號 送肉盤
3 19to1牛排 $500↑ 左營 民族1路948號2F 2人同行1人免費






二、熟悉 HTML/CSS 的作法


如果熟悉 HTML/CSS 的話,流程比較簡單,可使用這個線上表格產生器:



這個工具所產生的表格 HTML 碼,是少數幾個能支援表格排序外掛的格式,操作流程說明如下:

web-table-sort-html-generator-2.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

  • A:輸入列、欄數量
  • B:如果熟悉 CSS,可自行設定這裡的參數
  • C:此處一一輸入表格內容
  • D:輸入完畢,按「Generate Table」
  • E:最後複製此處產生的 HTML 碼即可



三、不熟悉 HTML/CSS 的流程


如果沒辦法自訂 CSS 的話,建議改按照以下流程,一樣使用前面的線上表格產生器:

web-table-sort-html-generator-3.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

  • A:輸入列、欄數量
  • B:不勾選所有選項
  • C:輸入表格標題、欄位名稱、所有表格內容
  • D:輸入完畢,按「Generate Table」
  • E:最後複製此處產生的 HTML 碼即可



四、可能比較快的操作流程


如果「三、不熟悉 HTML/CSS 的流程」已經比較熟了,而表格內容很多時,可能會覺得這個線上產生器的輸入不方便,那麼可改用以下優化過的流程:

1. 使用試算表製作表格內容

web-table-sort-html-generator-4.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

使用「Google 試算表」的優點是,複製、匯入、輸入都很方便,比操作任何線上表格產生器都來得方便。

如上圖,使用「Google 試算表」輸入或匯入表格內容,不含欄位標題及表格標題,處理完後下載格式選擇存成 csv 檔。


2. 匯入 Tables Generator

接著使用線上工具:



web-table-sort-html-generator-5.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

  • 匯入 CSV 檔:File → Import CSV file → 選擇檔案
  • 剛剛製作的表格內容就會出現在上圖
  • 勾選「Do not generate CSS」,就可得到乾淨的 HTML 碼
  • 複製下方的 HTML 碼備用,這些是表格內容的 HTML 碼
  • 但請注意,需將開頭的 <table> 以及結尾的 </table> 字串刪除,只留中間的所有字串


3. 製作表格標題及欄位名稱

接著使用線上工具:


web-table-sort-html-generator-6.jpg-讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)

  • A:列輸入 0,欄位輸入數量
  • B:不勾選所有選項
  • C:輸入表格標題,及欄位名稱
  • D:輸入完畢,按「Generate Table」
  • E:
    • 此處可產生乾淨的表格標題、表格欄位 HTML 碼,將這些 HTML 碼複製到他處備用
    • 在藍色箭頭處,也就是 <tbody> ~ </tbody> 之間,貼上前面複製的表格內容 HTML 碼
    • 這樣組合起來,就是全部完整的表格 HTML 碼



五、使用排序外掛


1. 修改 class 名稱

使用這個表格線上產生器製作的 HTML 碼,Table 元素的 class 名稱預設都是 "demo",如果網站所有表格都採用同樣的 CSS 樣式,那麼可維持 "demo" 不必變動。

但如果表格會使用不同的 CSS 樣式,可以為不同表格取不一樣的 class 名稱。


2. 排序外掛

這部分的程式碼,需要詳細說明請參考「讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」,以下直接看安裝程式碼,可放在文章中所有表格後面:


產生的表格排序效果可見「一、表格範例」。


更多「表格」製作技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP