設置CSS表格與CSS表單的樣式
本文和大家重點討論一下如何設置CSS表格與CSS表單的樣式，CSS表單作為與用戶交互的窗口，時刻都扮演著信息獲取和反饋的角色。這里圍繞CSS表格和表單介紹CSS設置其樣式的方法，以及利用CSS實現各種特效的技巧。
設置CSS表格與CSS表單的樣式
CSS表格與表單是網頁上最常見的元素，表格除了顯示數據外，還常常被用來排版。而CSS表單則作為與用戶交互的窗口，時刻都扮演著信息獲取和反饋的角色。本課圍繞表格和表單介紹CSS設置其樣式的方法，以及利用CSS實現各種特效的技巧。
1.控制表格
CSS表格作為傳統的HTML元素，一直受到網頁設計者們的青睞。使用CSS表格來表示數據、制作調查表等在網絡中屢見不鮮。同時因為CSS表格框架的簡單、明了，使用沒有邊框的表格來排版，也受到很多設計者的喜愛。我們在這里主要介紹CSS控制表格的方法，包括表格的顏色、標題、邊框、背景等。希望大家能夠掌握以下幾個方面的內容：
表格中的標記
表格的顏色
表格的邊框
2.CSS表格實例一：隔行變色
當表格的行列都很多、數據量很大的時候，單元格如果采用相同的背景色，用戶在實際使用時會感到凌亂。通常的解決辦法就是采用隔行變色，使得奇數行和偶數行的背景顏色不一樣，達到數據一目了然的目的。本例最終效果如圖所示。
3.CSS表格實例二：鼠標經過時變色的表格
對于長時間審核大量數據、瀏覽表格的用戶來說，即使是隔行變色的表格，閱讀時間長了仍然會感到疲勞。如果數據行能夠動態的根據鼠標來變色，就使得頁面充滿了生機，最大程度的減少用戶疲倦。
4.CSS表格實例三：日歷
日歷是日常生活中必不可少的東西，而作為備忘錄的日歷在桌面、網絡上都越來越流行。通過CSS設定表格的屬性，可以很輕松的實現各種日歷的效果。我們在這里通過簡單的實例，進一步熟練CSS控制表格的各種方法。本例最終效果如圖所示。
5.CSS表單
CSS表單是網頁與用戶交互所不可缺少的元素，傳統的HTML中對表單元素的樣式控制很少，僅僅局限于功能上的實現。我們在這里圍繞CSS控制表單進行詳細介紹，包括表單中各個元素的控制，與表格配合制作各種效果等等。希望大家能夠掌握以下幾個方面的內容：
CSS表單中的元素
像文字一樣的按鈕
七彩的下拉菜單
6.綜合實例一：直接輸入的Excel表格
作為公司、單位的各種年度報表，往往數據量都很大，如果也都像普通表單一樣逐項填寫，勢必造成網頁的冗長。而Excel表格在本地機器操作時一直廣受好評，通過CSS控制，結合CSS表格和CSS表單，便能輕松實現類似的效果，如圖所示。
7.綜合實例二：模仿新浪網民調查問卷
門戶網站上的新聞、事實往往都伴隨著各種各樣的調查問卷，包括事實的評論、輿論的反饋、事態的預測等等。這些調查問卷都離不開表格與表單的配合使用。本例通過簡單的模擬新浪的調查問卷，進一步熟練CSS控制表格、表單的方法。
這個圖是新浪網上關于姚明的熱點調查，本例通過簡單的CSS表格、表單的配合，模擬該調查問卷的效果。
【編輯推薦】
