簡單到不行的美化網頁技巧（一）、表格的美化

OOPS! 好醜是吧？ 讓我們用一些CSS美化一下，美化之前，把每個元素（

,, ... skiptomain| skiptosidebar 九又二分之一咖啡豆 ninehalfcoffeebean Home 2011年11月27日 簡單到不行的美化網頁技巧（一）、表格的美化 作者： Ben 標籤： 介面設計, UI, UserInterface 於 晚上10:07 網頁中，通常會用表格（...）來呈現多欄位資料，但沒經過美化的表格，除了會搶過原本要顯示的資料外，更會造成眼睛的莫名壓力，下面就根據美化的一些簡單原則，來展示一次如何美化網頁上的表格。

網頁html你會這樣寫： 欄位名稱一 欄位名稱二 欄位名稱三 欄位名稱四 資料一 欄位內容 欄位內容 欄位內容 資料一 欄位內容 欄位內容 欄位內容 實際會長這樣： 欄位名稱一欄位名稱二欄位名稱三欄位名稱四 資料一欄位內容欄位內容欄位內容 資料一欄位內容欄位內容欄位內容 OOPS!好醜是吧？ 讓我們用一些CSS美化一下，美化之前，把每個元素（,,

）加上class，如下：	欄位名稱一	欄位名稱二	欄位名稱三	欄位名稱四
資料一	欄位內容	欄位內容	欄位內容
資料一	欄位內容	欄位內容	欄位內容

(PS.太多，不加class，等等用階層指定CSS來套) 再來，把上述的class名稱，都寫在html中的...之間，如下： (ps：為了示範，暫時不把css獨立出去成一個檔，而是直接在head區定義) 接著開始美化過程： 第一個必要技巧：「框線顏色千萬不要是黑的，資料顯示文字也是！」 黑色框線，容易搶掉要顯示的資料，而且容易增加觀看者眼睛的疲勞感。

除非你有搭配好的色系，否則保險一點的框線顏色是灰色或淡灰，而字的顏色改成深灰色，所以改成： .fancytable{border:1pxsolid#cccccc;width:100%;border-collapse:collapse;} 新增加指定每格字的顏色為深灰色，文字預設都置中： .fancytabletd{ border:1pxsolid#cccccc; color:#555555;text-align:center;} (PS:表格通常會設為自動滿寬，所以後面先加上[width:100%]的敘述) 第二個必要技巧：「奇偶列顏色千萬不要都一樣！」 讓奇偶列不同顏色，可以增加閱讀舒適度，顏色建議是：一列白色、一列淺顏色（非白色）相間，所以加上： .datarowodd{background-color:#ffffff;} .dataroweven{background-color:#efefef;} 若是要給討厭的IE6顯示，請多補上這兩列： .datarowoddtd{background-color:#ffffff;} .dataroweventd{background-color:#efefef;} 第三個必要技巧：標題列指定深色背景色、前景色用淺色或白色 標題通常要醒目，且最好不要跟一般資料列相同顏色，故把背景設為較深的顏色，前景（字）顏色設為白色，文字最好也置中顯示。

.headerrow{background-color:#0066cc;} 新增加文字置中： .headerrowtd{ color:#ffffff; text-align:center;} 第四個必要技巧：加大每列高度，增加閱讀性 不用吝嗇畫面高度，適宜的列高度能減少閱讀時的疲勞感，增加每列資料的辨識度。

所以在原本的.fancytabletd{...}裡面加上列高： .fancytabletd{border:1pxsolid#cccccc;color:#555555;text-align:center;line-height:28px;} 經過上述一些簡單到不行的原則後，最後的css內容如下： .fancytable{border:1pxsolid#cccccc;width:100%;border-collapse:collapse;} .fancytabletd{border:1pxsolid#cccccc;color:#555555;text-align:center;line-height:28px;} .headerrow{background-color:#0066cc;} .headerrowtd{color:#ffffff;text-align:center;} .datarowodd{background-color:#ffffff;} .dataroweven{background-color:#efefef;} .datarowoddtd{background-color:#ffffff;} .dataroweventd{background-color:#efefef;} 第五個可有可無的技巧：加上div自定邊框 我會在...外面再包一層div，變成...，然後css裡加上對sexyborder的描述，如下： .sexyborder{    border:1pxsolid#0066cc;padding:5px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px; } 最後表格變成這樣： (若你是比較新的瀏覽器，則框的角可以正常顯示圓角) 欄位名稱一欄位名稱二欄位名稱三欄位名稱四 資料一欄位內容欄位內容欄位內容 資料一欄位內容欄位內容欄位內容 是不是跟原來的table長相差很多呢？ 技巧很簡單，你一定也會，但因為簡單，你卻沒這樣做，還用著醜醜的表格，這是誰的問題？  [UI非難事，只存乎一心]，咱們下次見！ 以電子郵件傳送這篇文章 BlogThis！ 分享至Twitter 分享至Facebook 2 意見: Unknown 2013/8/11清晨6:22 謝謝您寫這篇文章另小弟受益良多不過想請教一下如果小弟想在欄位名稱四的欄位內容中的文字靠框框的左邊應該要加些什麼呢? Not 2014/6/24下午6:18 十分有用的教學!原本死板的網頁瞬間變成類似PowerPoint2010表格般華麗 張貼留言 較舊的文章 首頁 訂閱： 張貼留言(Atom) 首頁 ninehalfcoffeebean 所有標籤 介面設計 (1) 我的作品 (8) 我的婚禮點滴 (2) 我的DIY (3) 創意軟體 (1) 程式設計 (1) UI (1) UserInterface (1) Blogroll Bloggernews About ninehalfcoffeebean AboutMe 用未滿的思想玩創意，用未達的瘋狂玩設計，一個不甘寂寞的瘋狂設計者。

總有著太多的想法裝在腦袋，感覺快要滿溢，似乎該寫下些什麼，以免腦袋爆炸，以免漸行痴呆，也許哪一天能給我出個書吧！（當然不是指死後的傳記...） 文章分類（依時間） 十一月(1) 六月(1) 四月(2) 三月(2) 十月(1) 一月(1) 一月(1) 文章分類（依標籤） 介面設計 (1) 我的作品 (8) 我的婚禮點滴 (2) 我的DIY (3) 創意軟體 (1) 程式設計 (1) UI (1) UserInterface (1) 熱門文章列表 簡單到不行的美化網頁技巧（一）、表格的美化 自製網拍靜物攝影棚、攝影箱教學 ほぼ日手帳之窮人手帳保護套自製教學 小惡魔頭巾紙模型公仔BOXMAN製作！ 捷運漫畫投稿兩則 自製婚宴場地的桌立牌 我的喜帖設計 電腦相框FrameLife，免費下載使用！(最新版本：1.0.77) 創意軟體WifeIsBlind! 我的其他網誌 Loremipsum 技術提供：Blogger. Followers BlogArchive 十一月(1) 六月(1) 四月(2) 三月(2) 十月(1) 一月(1) 一月(1) Bloggertemplates Textwidget 2011年11月27日 簡單到不行的美化網頁技巧（一）、表格的美化 網頁中，通常會用表格（...）來呈現多欄位資料，但沒經過美化的表格，除了會搶過原本要顯示的資料外，更會造成眼睛的莫名壓力，下面就根據美化的一些簡單原則，來展示一次如何美化網頁上的表格。

網頁html你會這樣寫： 欄位名稱一 欄位名稱二 欄位名稱三 欄位名稱四 資料一 欄位內容 欄位內容 欄位內容 資料一 欄位內容 欄位內容 欄位內容 實際會長這樣： 欄位名稱一欄位名稱二欄位名稱三欄位名稱四 資料一欄位內容欄位內容欄位內容 資料一欄位內容欄位內容欄位內容 OOPS!好醜是吧？ 讓我們用一些CSS美化一下，美化之前，把每個元素（,,

）加上class，如下：	欄位名稱一	欄位名稱二	欄位名稱三	欄位名稱四
資料一	欄位內容	欄位內容	欄位內容
資料一	欄位內容	欄位內容	欄位內容

(PS.太多，不加class，等等用階層指定CSS來套) 再來，把上述的class名稱，都寫在html中的...之間，如下： (ps：為了示範，暫時不把css獨立出去成一個檔，而是直接在head區定義) 接著開始美化過程： 第一個必要技巧：「框線顏色千萬不要是黑的，資料顯示文字也是！」 黑色框線，容易搶掉要顯示的資料，而且容易增加觀看者眼睛的疲勞感。

除非你有搭配好的色系，否則保險一點的框線顏色是灰色或淡灰，而字的顏色改成深灰色，所以改成： .fancytable{border:1pxsolid#cccccc;width:100%;border-collapse:collapse;} 新增加指定每格字的顏色為深灰色，文字預設都置中： .fancytabletd{ border:1pxsolid#cccccc; color:#555555;text-align:center;} (PS:表格通常會設為自動滿寬，所以後面先加上[width:100%]的敘述) 第二個必要技巧：「奇偶列顏色千萬不要都一樣！」 讓奇偶列不同顏色，可以增加閱讀舒適度，顏色建議是：一列白色、一列淺顏色（非白色）相間，所以加上： .datarowodd{background-color:#ffffff;} .dataroweven{background-color:#efefef;} 若是要給討厭的IE6顯示，請多補上這兩列： .datarowoddtd{background-color:#ffffff;} .dataroweventd{background-color:#efefef;} 第三個必要技巧：標題列指定深色背景色、前景色用淺色或白色 標題通常要醒目，且最好不要跟一般資料列相同顏色，故把背景設為較深的顏色，前景（字）顏色設為白色，文字最好也置中顯示。

.headerrow{background-color:#0066cc;} 新增加文字置中： .headerrowtd{ color:#ffffff; text-align:center;} 第四個必要技巧：加大每列高度，增加閱讀性 不用吝嗇畫面高度，適宜的列高度能減少閱讀時的疲勞感，增加每列資料的辨識度。

所以在原本的.fancytabletd{...}裡面加上列高： .fancytabletd{border:1pxsolid#cccccc;color:#555555;text-align:center;line-height:28px;} 經過上述一些簡單到不行的原則後，最後的css內容如下： .fancytable{border:1pxsolid#cccccc;width:100%;border-collapse:collapse;} .fancytabletd{border:1pxsolid#cccccc;color:#555555;text-align:center;line-height:28px;} .headerrow{background-color:#0066cc;} .headerrowtd{color:#ffffff;text-align:center;} .datarowodd{background-color:#ffffff;} .dataroweven{background-color:#efefef;} .datarowoddtd{background-color:#ffffff;} .dataroweventd{background-color:#efefef;} 第五個可有可無的技巧：加上div自定邊框 我會在...外面再包一層div，變成...，然後css裡加上對sexyborder的描述，如下： .sexyborder{    border:1pxsolid#0066cc;padding:5px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px; } 最後表格變成這樣： (若你是比較新的瀏覽器，則框的角可以正常顯示圓角) 欄位名稱一欄位名稱二欄位名稱三欄位名稱四 資料一欄位內容欄位內容欄位內容 資料一欄位內容欄位內容欄位內容 是不是跟原來的table長相差很多呢？ 技巧很簡單，你一定也會，但因為簡單，你卻沒這樣做，還用著醜醜的表格，這是誰的問題？  [UI非難事，只存乎一心]，咱們下次見！ 張貼者： Ben 於 晚上10:07 標籤： 介面設計, UI, UserInterface 2 意見: * 謝謝您寫這篇文章另小弟受益良多不過想請教一下如果小弟想在欄位名稱四的欄位內容中的文字靠框框的左邊應該要加些什麼呢? * 十分有用的教學!原本死板的網頁瞬間變成類似PowerPoint2010表格般華麗 張貼留言 較舊的文章 首頁 訂閱： 張貼留言(Atom) AboutMe Ben SoftwareUserInterface設計狂人一個，會寫程式、會畫畫，但由於觀念做法不同，不願意人家叫他程式工程師，自許自己為創意設計者。

檢視我的完整簡介   Allrightsreserved.PoweredbyBlogger