之前寫過一篇「讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」，只要安裝這個外掛就能達到排序的效果，看起來非常方便。但最近接到的需求除了要讓表格排序，還得讓案主知道怎麼做出表格來，這下就麻煩了，因為很多站長其實不熟悉 HTML 碼，自然也不知道表格 Table 的正規 HTML 格式會是什麼樣子。
所以我之前也寫了一篇「網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV 檔」，讓製作表格不再是困難的事，什麼都不需要懂，就可無腦產生表格語法。
不過困難的還在後頭，因為這個「表格自動排序」的外掛，只吃特定格式的表格 HTML 碼，所以得想辦法讓案主做出特定的 HTML 碼才行。
因此本篇會找出一個順暢的操作流程，來操作各種線上工具，產生表格的 HTML 碼，最後再套用排序外掛。
(圖片出處: photo-ac.com)
一、表格範例
本篇以上圖範例的表格內容來進行流程，示範如何做出這種形式的表格，並進行排序。
完成效果大致像這樣：
| No | 餐廳 | 價格 | 區域 | 地址 | 優惠 |
|---|---|---|---|---|---|
| 1 | 墨吉日式 | $500↑ | 左營 | 富民路160號 | 送小蛋糕 |
| 2 | 巴蜀大將 | $300↑ | 三民 | 鼎山街225號 | 送肉盤 |
| 3 | 19to1牛排 | $500↑ | 左營 | 民族1路948號2F | 2人同行1人免費 |
二、熟悉 HTML/CSS 的作法
如果熟悉 HTML/CSS 的話，流程比較簡單，可使用這個線上表格產生器：
這個工具所產生的表格 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
接著使用線上工具：
- 匯入 CSV 檔：File → Import CSV file → 選擇檔案
- 剛剛製作的表格內容就會出現在上圖
- 勾選「Do not generate CSS」，就可得到乾淨的 HTML 碼
- 複製下方的 HTML 碼備用，這些是表格內容的 HTML 碼
- 但請注意，需將開頭的 <table> 以及結尾的 </table> 字串刪除，只留中間的所有字串
3. 製作表格標題及欄位名稱
接著使用線上工具：
- 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 安裝懶人包 」，以下直接看安裝程式碼，可放在文章中所有表格後面：
產生的表格排序效果可見「一、表格範例」。
更多「表格」製作技巧：
不好意思想請教您一件事 我按照教學建立了一篇文章 但不知道為何，畫面中都會跑出一個眼睛的符號 請問要如何修正呢？
回覆刪除