產品規格很長，如何安排手機版的表格與段落？

AO2 FIELD GUIDE · N068 · WordPress 與轉換體驗

手機版規格表應保留型號、欄名、單位與適用條件。整理分組、橫向捲動及表格語意，附手機閱讀與操作驗收清單。

手機版規格表：先判斷讀者是找一個值，還是比較多個型號

單一產品的規格清單，與多型號並排比較表，手機版需要不同安排。前者可以按欄位分組，後者則可能需要保留二維表格，讓讀者在相同列比較。把所有表格都強制變成卡片，可能讓同一欄位分散在很遠的位置；反過來，所有內容都塞進超寬表格，也會讓查單一型號的人迷路。

先寫出最常見任務：確認介面、找到特定型號、比較配置或下載完整資料。讓 PM 指出哪些欄位會影響不適用判斷，這些欄位應較容易找到，而不是依原始試算表的欄位順序直接貼上。手機設計的重點是保留判斷能力，不只是讓版面沒有溢出。

橫向捲動要限制在表格區塊

對確實需要多欄比較的表格，可在外層容器使用可橫向捲動的安排，表格保留合理最小寬度。整頁不應跟著被撐寬，讀者也應能看出右側仍有內容。可用簡短提示告知可左右捲動，但提示不能代替實際操作驗收。

固定第一欄有時有助辨識，不過需測試它是否遮住其他內容、在放大時占去大半畫面，以及表格標頭與資料是否仍對齊。若實作不穩定，先用較簡單的分組表格，往往比加入複雜互動更容易維護。

表格語意與視覺樣式一起保留

W3C 表格教學說明，th、td 與適當的標頭關係能讓輔助科技理解資料。手機排版不能只靠 CSS 生成看得見的欄名，卻讓實際標頭關係消失。較複雜表格可以使用 caption 與鄰近說明交代比較範圍，再依需要用 scope 等標記建立關係。

若原始來源使用合併儲存格，先檢查能否改成較簡單的資料結構。每一列應能辨認型號、值的性質和限制。註腳編號、單位與適用條件要在手機上同樣可讀，不能因空間不足就移到沒有連結的另一張圖。

路燈產品示例：先比較條件，再比較數字

以下為假想版面情境。一個路燈系列有多種功率、配光與控制配置。如果桌機表格把所有組合排成十多欄，手機可先提供配置選擇的文字摘要，再按比較任務分成基本規格、光學配置與控制條件。每一組都保留型號與來源版本，避免讀者以為不同組的選項能任意組合。

若提供篩選功能，預設狀態要清楚顯示目前比較範圍，並讓無結果時能返回完整資料。不能把「未選取」誤作「不支援」，也不能讓下載 PDF 和畫面篩選後的資料使用不同產品版本。功能越多，對資料責任與測試的要求也越高。

驗收要記錄裝置與實際任務

不要只把瀏覽器拖窄後截圖。請測試窄螢幕、觸控捲動、文字放大、鍵盤操作與必要的輔助閱讀；使用實際可得裝置並記錄限制。至少完成找型號、讀註腳、比較同一欄、開來源文件和前往詢問等任務。查不到資料時，也要看使用者能否理解是未提供還是不適用。

改版後若表格內容仍由編輯手工維護，交接文件應說明欄位規則、容器結構和發布前檢查。不能只交一段漂亮的樣板，卻沒有告訴下一個人新增型號時要如何避免破版與錯位。

常見問題

手機版只放 PDF 可以嗎？

不宜把所有判斷都交給 PDF。手機頁先顯示產品辨識、用途、影響選型的關鍵條件、資料版本與下載說明，再提供完整文件。用實際手機檢查表格能否讀懂欄名、單位和限制，必要時分組或提供橫向閱讀提示。驗收任務可以是找到適用型號及對應手冊，確認不需先下載大型文件才能辨認。完整規格不能因改成摘要而失去必要條件。

每張表都要做互動篩選嗎？

不需要。先看使用者是在閱讀單一規格、比較少數產品，還是從大量選項找組合。單一產品表可先用清楚分組、固定單位與段落摘要；只有選項多且確有篩選任務時，才增加互動。互動表還需處理無結果、清除條件與手機操作，並保留可閱讀內容。以指定選型任務測試能否找到答案，再衡量維護成本，不按表格數量一律加功能。

參考資料與方法範圍

• W3C WAI｜資料表格與標頭關係

查核日期：2026 年 10 月 21 日。官方文件支援文中對應的平台或可及性說明；工作表與決策流程為本文整理，產業情境另行標示為假想示例。作者公開分享作為工作觀點來源，不作客戶成效或資格背書。