說到 Table 和 Responsive Wed Design（ RWD，響應(yīng)式網(wǎng)頁設(shè)計），這兩位的關(guān)係，可說是恩怨糾葛，孰優(yōu)孰劣也無法一時判斷出來的啊。但不可否認(rèn)的，隨著行動裝置越來越普及的現(xiàn)在，如何在小螢?zāi)幌袷謾C(jī)、平板上，也可以顯示資訊量龐大的表格，就是一門網(wǎng)頁設(shè)計的學(xué)問。（相信很多較早的網(wǎng)站，在遇到龐大資訊時，還是傾向以「表格」呈現(xiàn)，但許多 table 在手機(jī)上看起來就是有很高的閱讀門檻?。?/p>

 

有些網(wǎng)頁資訊還是不得不以表格的形式存在，像是時刻表相關(guān)的表格，如醫(yī)院門診、火車時刻表等等；大量產(chǎn)品、人員資訊，像是詳細(xì)產(chǎn)品規(guī)格、球員個人資料；其他細(xì)節(jié)資訊，像各產(chǎn)品價位，產(chǎn)品比較表、考試資訊含報名日期、科目、應(yīng)考時間等等族繁不及備載。要解決 table 在響應(yīng)式網(wǎng)頁中顯示，大略有下面三項解法：1.破壞原本表格排版、2.安裝外掛、3.不使用table語法來製作表格。

從 Css-Trick 這裡可以看到他提供了四種響應(yīng)式網(wǎng)頁的解決方案，分為：擠壓（Squish）、捲動（Scroll）、摺疊橫列（Collapse Rows）、摺疊直行（Collapse Columns），今天不是想就這些表格的作法，而想探討各種方式適當(dāng)?shù)氖褂脮r機(jī)。

Squish 形式相對來說比較簡單，針對顯示裝置的解析度，改變每個欄位長度，整體來說較無破壞原有表格之樣式。但問題來了，當(dāng)表格內(nèi)某幾個欄位文字訊息特別多時，會造成這些欄位變得特別的長，因此影響觀看流程，使用者體驗自然不佳。這樣的表格較適合資訊量不大或每個欄位資訊量較一致資訊表。

Scroll 格式最為簡單，只要在語法中加入「overflow=”auto”」即完成，讓使用者在低解析度的裝置中自行滑動來瀏覽到所有資訊。會用到這種表格，其中每一個欄位的訊息想必是獨特、重要的，一欄都無法省略或移動位置，雖然某種程度上，也不完全符合 RWD 的操作邏輯（盡量減少放大縮小、滑動），卻是較為簡單的解法。像是現(xiàn)在透過 Google 雲(yún)端硬碟開啟 excel 表格，都會自動變成可滑動的表格。唯一要注意的是，對於使用者來說，表格右邊需要「滑過去」才看的到的內(nèi)容，有一定的機(jī)率被忽略掉，所以在內(nèi)容設(shè)計上，可能也需重新編排過。

Collapse 則最接近 RWD 的設(shè)計方針，這就是上述提及的「破壞原本表格排版」的方式。在小螢?zāi)簧?，直接轉(zhuǎn)換成 block 的顯示方式。不過這種摺疊的形式，一方面也挑戰(zhàn)著人類長久以來對於表格閱讀的認(rèn)知，就讓我們來看看幾個例子，如果利用 Collapse 方式轉(zhuǎn)換為手機(jī)版，你是否還能夠閱讀（為了舉例，這邊用圖片形式呈現(xiàn)）：

 

 

解決表格還是要符合想呈現(xiàn)的資訊形式

某些重要的訊息，像是價格（或特惠），就沒辦法從這樣的表現(xiàn)形式中突顯，整體文字的 align 可能也要調(diào)整才適合閱讀。

從這例子可以看出，表格訊息的設(shè)計與網(wǎng)頁設(shè)計，絕對是息息相關(guān)，當(dāng)你的使用者看到不符合他們所預(yù)期的資訊時，跳出率自然會提昇。另一種在業(yè)界比較常見的偷懶作法就是提供使用者下載 PDF 或 Excel 檔案，提供完整訊息（畢竟有些工商型錄的確不適合在網(wǎng)頁呈現(xiàn)），但可能造成跳出網(wǎng)頁之類的副作用。

對於 table 和 RWD 的網(wǎng)頁設(shè)計，你有什麼想法或更好的解決方案嗎？歡迎分享或提問喔！

? CTK Pro 的作品：雙邊論壇資料庫之表格樣式

? 再來看看「手機(jī)版與 RWD 的比較」

? Youtube 影片放到網(wǎng)頁，怎麼有 RWD 效果