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

之前寫過一篇「讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」，只要安裝這個外掛就能達到排序的效果，看起來非常方便。

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

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

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

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

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

一、表格範例

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

完成效果大致像這樣：

2019高雄生日餐廳優惠

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

二、熟悉 HTML/CSS 的作法

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

• HTML Table Generator

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

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

三、不熟悉 HTML/CSS 的流程

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

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

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

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

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



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

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


2. 匯入 Tables Generator

接著使用線上工具：

• Tables Generator

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

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

接著使用線上工具：

• HTML Table Generator

• 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 安裝懶人包 」，以下直接看安裝程式碼，可放在文章中所有表格後面：


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

更多「表格」製作技巧：