看到我們的網(wǎng)站主要以信息展示為主温学，其中涉及到很多表格及數(shù)據(jù)統(tǒng)計诀紊。對表格的可讀性提升方面進行了學習舷丹。
原文網(wǎng)址：http://blog.rexsong.com/?p=10271
表格存在的目的：展示多維度大數(shù)據(jù)量內(nèi)容展示葡幸，更好的對比分析數(shù)據(jù)及內(nèi)容氓仲。
為了提高表格的可讀性，可從語義層和表現(xiàn)層兩個層面出發(fā)鳍烁。表現(xiàn)層涉及到視覺表達設計叨襟，語義層涉及到表格結構。
表格可讀性問題及提升方法
1幔荒、行列組織關系模糊
主要關于單元格之間的關系問題對可讀性的影響芹啥。通過輔助手段可以讓信息呈現(xiàn)更好的差異化，或突出更重要的信息铺峭。
（1）表頭表尾和表體明顯區(qū)分，通常表頭汽纠、表尾的效果一致卫键。如下圖，表頭表尾與表體的層次區(qū)分明顯：
（2）用邊框分隔單元格虱朵，給單元格加上邊框后莉炉，可以更清晰的表達數(shù)據(jù)，并且不易看岔行碴犬。如下圖絮宁，1像素灰色邊框表格和黑色文字的對比：
注意：表格的邊框顏色不能過于搶眼。
（3）間行換色服协，間行換色更適用于表格過寬的需求绍昂，一定程度上能加強避免讀錯。另外，間行換色常與1像素邊框同時使用窘游。注意：間行換色的兩種顏色不能反差過大唠椭。
如下圖，1像素表格的表體區(qū)域有不太明顯的間行換色效果：
（4）間列換色忍饰，也叫隔行換色贪嫂，等于是間行換色的“垂直”版本，可以更強化列與列之間的差異艾蓝。如下圖力崇，分別給不同列指定背景色：
個人感覺這個顏色太亮了，容易視覺疲勞赢织。
（5）重要數(shù)據(jù)列強調(diào)亮靴，同樣使用
2、單元格內(nèi)容不清晰
主要是單元格內(nèi)容的展示以及數(shù)據(jù)屬性對可讀性的影響敌厘。根據(jù)數(shù)據(jù)特性定制顯示的四種對齊方式台猴，原則是首先是滿足用戶需求，其次迎合用戶的閱讀習慣俱两，最后注意單元格的內(nèi)容不留空饱狂。
（1）可變長度字符串左對齊，“可變長度”指長度不一定的數(shù)據(jù)列宪彩，比如產(chǎn)品名稱休讳。此類情況應該符合用戶的視線規(guī)律，左對齊排列尿孔，也能輔助對比明確各條數(shù)據(jù)的長短俊柔。如下圖，表格的Title, Company, Location三個字段數(shù)據(jù)：
（2）固定長度活合、較短字符串居中雏婶，“固定長度”指長度規(guī)格不會變化的數(shù)據(jù)列，比如日期2009.02.21（補0是數(shù)字書寫規(guī)范）白指×敉恚“較短字符串”指很短也不需邏輯對比的數(shù)據(jù)列，比如操作鏈接告嘲，或表狀態(tài)文字错维，放中間左右留白均等是折中的最好效果。如下圖橄唬，表格的“報告赋焕、狀態(tài)”兩個字段數(shù)據(jù)：
（3）可比較字符串右對齊，“可比較”指需要關聯(lián)對比的數(shù)據(jù)列仰楚，基本都指數(shù)字的情況隆判，比如錢有十位的￥24.30和百位的￥452.10犬庇。注意一點，這里的“可比較”其實也是“可變長度”的蜜氨，只不過“可比較”是更重要的需求械筛。表格的數(shù)據(jù)列對比，是各種系統(tǒng)和平臺最經(jīng)常碰到的需求飒炎，此點也是最容易被忽視的問題埋哟。如下圖，表格的數(shù)字縱向對比效果：
（4）合并列的單元格頂部對齊郎汪，“合并列的單元格”指需要在水平方向跨多個單元格的需求赤赊，復雜表格中一對多的關系。因為單元格默認垂直居中煞赢，如果是多行的數(shù)據(jù)表抛计，用戶從上往下的閱讀開始往往搞不清楚對應的后續(xù)數(shù)據(jù)列內(nèi)容。如下圖照筑，表格的“聯(lián)系人吹截、狀態(tài)、價格”三個字段數(shù)據(jù)：
（5）不留空白凝危，空白單元格容易造成用戶困惑甚至誤解波俄，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值蛾默？正確做法懦铺，沒有數(shù)據(jù)的顯示0，給沒有值的單元格劃線或者打叉支鸡。如下圖冬念，單元格內(nèi)劃橫杠表示不支持：
