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

 

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

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

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

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

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

 

 

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

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

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

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

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

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

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