表格和表單是網頁中非常重要的兩個元素，在上篇部落格中，我們簡單的介紹了CSS的頁面背景設定，今天小編繼續來介紹CSS的相關知識，在我們的CSS中如何設定表格和表單，首先，來看一張思維導圖，通過圖簡單的預覽一下該博文主要講解哪些CSS的基礎知識：
首先我們的首先表格中的标記，代碼和運作效果如下所示：
運作效果如下所示：
這是一個年度輸入的表格，正文部分首先是一個table标記開始表示的是整個表格，一個caption表示的一個表格的标題，tr表示一個表格的行，而th表示的是一個表格的比較重要的第一行，後面th表示表格的豎着的比較重要的那個行，td表格一個一個的單元格，運作效果如上圖所示。這些标記：tr、th、td都是組成表格不可缺少的元素。剛才的表格非常淡雅，我們僅僅隻是為了表示表格的标記，那麼CSS是如何控制表格的顔色的呢？看我們接下來的例子代碼和運作效果：
運作效果如下：
分析上面的代碼我們可以看出，在table這裡用一個class=“datalist”來将整個表格的CSS定義出來，body設定了背景顔色以及對齊方式；dataList設定了表格文字顔色、表格背景色以及表格字型；datalist caption設定了标題，就看到了我們上述的效果，對于大量的資料，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的顔色，不便于資料的查找。而隔行變色就能解決這個問題，看下面的例子代碼和運作效果：
運作效果如下：
分析一下上面的代碼，正文部分把奇數行和偶數行都寫上了，屬性值大家都可以看出來，值得一提的是這裡的altrow,如果設定了這個的屬性，那麼他将覆寫其他顔色，而是用自己的顔色，這就實作了隔行變色的效果。那麼接下來我們再看看CSS是如何控制表單的呢？例子代碼和運作效果如下所示：
分析一下上面例子，正文部分是一個表單，他以form标志開始，其中裡邊有輸入框，有下拉菜單，有單選項，有複選框，有文字的輸入框，有按鈕，運作效果如上圖所示，我們接下來看像文字一樣的按鈕，我們來看一下例子代碼和運作效果：
分析一下上面的例子，在上面的例子中，我們把border-bottom設定為1px，其她的border-top、border-left、border-right邊框都設定為了0.然後設定一個顔色和背景色就實作了像文字一樣的按鈕。而這個按鈕，我們講四個邊框都設定為0，而背景色設定為透明來實作像文字一樣的按鈕；通過這個我們可以看到，巧妙的使用CSS，能帶給我們很多驚喜。Excel表格是在office軟體中非常受大家歡迎的一個軟體，而在網頁中我們來模拟。在我們的CSS中，我們可以像在office裡邊的excel一樣随意的輸入東西，而不再有繁瑣的什麼輸入框。下面我們來看一下例子代碼和運作效果：
小編寄語：該博文，小編主要簡單的總結了CSS中關于如何設定表格和表單樣式的相關知識點，主要講解了六個方面的小知識，包括表格中的标記，表格中的顔色，隔行變色，表單中的元素，文字按鈕，小試牛刀也就是模仿office做了一個可以編寫的Excel表格，其中有一個小例子，就是模仿office中的Excel做一個可以編輯的表格，首先正文部分是用一個表格來進行搭建，而将表單嵌套在表格裡邊，每一項都設定一個id，一個name。最後是一個按鈕；我們看CSS代碼，在表格中，我們将td單元格他的邊框設定，而對于input這個文本框，我們将他的border設定為none，那麼這樣所實作的效果就是輸入的邊框被取消掉了，而真正取而代之的是表格的邊框，進而實作了這麼一個小技巧。通過這個執行個體，我們可以看到，巧妙的設定CSS，能達到很多你意想不到的效果。BS學習，未完待續......