表格和表單是網頁中非常重要的兩個元素，我們這次來說說CSS如何設定表格和表單樣式。我們先來看看CSS如何控製表格。
首先表格中的標記：我們看一下代碼：
<html><head><title>年度收入</title><style><!--table{caption-side:bottom;}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1"><caption>年度收入 2010 - 2012</caption><tr><th></th><th scope="col">2004</th><th scope="col">2005</th><th scope="col">2006</th><th scope="col">2007</th></tr><tr><th scope="row">撥款</th><td>11,980</td><td>12,650</td><td>9,700</td><td>10,600</td></tr><tr><th scope="row">捐款</th><td>4,780</td><td>4,989</td><td>6,700</td><td>6,590</td></tr><tr><th scope="row">投資</th><td>8,000</td><td>8,100</td><td>8,760</td><td>8,490</td></tr><tr><th scope="row">募捐</th><td>3,200</td><td>3,120</td><td>3,700</td><td>4,210</td></tr><tr><th scope="row">銷售</th><td>28,400</td><td>27,100</td><td>27,950</td><td>29,050</td></tr><tr><th scope="row">雜費</th><td>2,100</td><td>1,900</td><td>1,300</td><td>1,760</td></tr><tr><th scope="row">總計</th><td>58,460</td><td>57,859</td><td>58,110</td><td>60,700</td></tr></table></body></html>
這是一個年度輸入的表格，本文部分首先是一個table標記開始表示的是整個表格，一個caption表示的一個表格的標題，tr表示一個表格的行，而th表示的是一個表格的比較重要的第一行，後面th表示表格的豎著的比較重要的那個行，td表格一個一個的儲存格，我們看一下效果，便明白。
這些標記：tr、th、td都是組成表格不可缺少的元素。
剛才的表格非常淡雅，我們僅僅只是為了表示表格的標記，那麼CSS是如何控製表格的顏色的呢：我們看一下代碼
<html><head><title>年度收入</title><style><!--body{background-color:#ebf5ff;/* 頁面背景色 */margin:0px; padding:4px;text-align:center;/* 置中對齊（IE有效） */}.datalist{color:#0046a6;/* 表格文字顏色 */background-color:#d2e8ff;/* 表格背景色 */font-family:Arial;/* 表格字型 */}.datalist caption{font-size:18px;/* 標題文字大小 */font-weight:bold;/* 標題文字粗體 */}.datalist th{color:#003e7e;/* 行、列名稱顏色 */background-color:#7bb3ff;/* 行、列名稱的背景色 */}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist"><caption>年度收入 2008 - 2011</caption><tr><th></th><th scope="col">2008</th><th scope="col">2009</th><th scope="col">2010</th><th scope="col">2011</th></tr><tr><th scope="row">撥款</th><td>11,980</td><td>12,650</td><td>9,700</td><td>10,600</td></tr><tr><th scope="row">捐款</th><td>4,780</td><td>4,989</td><td>6,700</td><td>6,590</td></tr><tr><th scope="row">投資</th><td>8,000</td><td>8,100</td><td>8,760</td><td>8,490</td></tr><tr><th scope="row">募捐</th><td>3,200</td><td>3,120</td><td>3,700</td><td>4,210</td></tr><tr><th scope="row">銷售</th><td>28,400</td><td>27,100</td><td>27,950</td><td>29,050</td></tr><tr><th scope="row">雜費</th><td>2,100</td><td>1,900</td><td>1,300</td><td>1,760</td></tr><tr><th scope="row">總計</th><td>58,460</td><td>57,859</td><td>58,110</td><td>60,700</td></tr></table></body></html>
在table這裡用一個class=“datalist”來將整個表格的CSS定義出來，body設定了背景顏色以及對齊；dataList設定了表格文字顏色、表格背景色以及表格字型；datalist caption設定了標題……我們看一下效果：
對於大量的資料，表格有非常多的行和非常多的列，如果表格的每一行都採用相同的顏色，對於長期面對顯示器的人來說，是經常找不到資料的。而隔行變色就能解決這個問題，我們看這個效果：
下面我們看隔行表示顯示的代碼：
<html><head><title>Member List</title><style><!--.datalist{border:1px solid #0058a3;/* 表格邊框 */font-family:Arial;border-collapse:collapse;/* 邊框重疊 */background-color:#eaf5ff;/* 表格背景色 */font-size:14px;}.datalist caption{padding-bottom:5px;font:bold 1.4em;text-align:left;}.datalist th{border:1px solid #0058a3;/* 行名稱邊框 */background-color:#4bacff;/* 行名稱背景色 */color:#FFFFFF;/* 行名稱顏色 */font-weight:bold;padding-top:4px; padding-bottom:4px;padding-left:12px; padding-right:12px;text-align:center;}.datalist td{border:1px solid #0058a3;/* 儲存格邊框 */text-align:left;padding-top:4px; padding-bottom:4px;padding-left:10px; padding-right:10px;}.datalist tr.altrow{background-color:#c7e5ff;/* 隔行變色 */}--></style> </head><body> <table class="datalist" summary="list of members in EE Studay"><caption>Member List</caption><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr><!-- 奇數行 --><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr><tr class="altrow"><!-- 偶數行 --><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr><tr><!-- 奇數行 --><td>tastestory</td><td>W15</td><td>Nov 29th</td><td>Sagittarius</td><td>1095245</td></tr><tr class="altrow"><!-- 偶數行 --><td>lovehate</td><td>W47</td><td>Sep 5th</td><td>Virgo</td><td>6098017</td></tr><tr><!-- 奇數行 --><td>slepox</td><td>W19</td><td>Nov 18th</td><td>Scorpio</td><td>0658635</td></tr><tr class="altrow"><!-- 偶數行 --><td>smartlau</td><td>W19</td><td>Dec 30th</td><td>Capricorn</td><td>0006621</td></tr><tr><!-- 奇數行 --><td>whaler</td><td>W19</td><td>Jan 18th</td><td>Capricorn</td><td>1851918</td></tr><tr class="altrow"><!-- 偶數行 --><td>shenhuanyan</td><td>W25</td><td>Jan 31th</td><td>Aquarius</td><td>0621827</td></tr><tr><!-- 奇數行 --><td>tuonene</td><td>W210</td><td>Nov 26th</td><td>Sagittarius</td><td>0091704</td></tr><tr class="altrow"><!-- 偶數行 --><td>ArthurRivers</td><td>W91</td><td>Feb 26th</td><td>Pisces</td><td>0468357</td></tr><tr><!-- 奇數行 --><td>reconzansp</td><td>W09</td><td>Oct 13th</td><td>Libra</td><td>3643041</td></tr><tr class="altrow"><!-- 偶數行 --><td>linear</td><td>W86</td><td>Aug 18th</td><td>Leo</td><td>6398341</td></tr><tr><!-- 奇數行 --><td>laopiao</td><td>W41</td><td>May 17th</td><td>Taurus</td><td>1254004</td></tr><tr class="altrow"><!-- 偶數行 --><td>dovecho</td><td>W19</td><td>Dec 9th</td><td>Sagittarius</td><td>1892013</td></tr><tr><!-- 奇數行 --><td>shanghen</td><td>W42</td><td>May 24th</td><td>Gemini</td><td>1544254</td></tr><tr class="altrow"><!-- 偶數行 --><td>venessawj</td><td>W45</td><td>Apr 1st</td><td>Aries</td><td>1523753</td></tr><tr><!-- 奇數行 --><td>lightyear</td><td>W311</td><td>Mar 23th</td><td>Aries</td><td>1002908</td></tr></table></body></html>
本文部分把奇數行和偶數行都寫上了。屬性值大家自己看，這裡不再一一介紹了，值得一提的是這裡的altrow,如果設定了這個的屬性，那麼他將覆蓋他父親的顏色，而是用自己的顏色，這就實現了隔行變色的效果。
那麼接下來我們再看看CSS是如何控製表單的呢：代碼
<html><head><title>表單</title><style><!--form {border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;}input {color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;}select {width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;}textarea {width: 200px;height: 40px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;}--></style> </head><body><form method="post"><p>請輸入您的姓名:<br><input type="text" name="name" id="name"></p><p>請選擇你最喜歡的顏色:<br><select name="color" id="color"><option value="red">紅</option><option value="green">綠</option><option value="blue">藍</option><option value="yellow">黃</option><option value="cyan">青</option><option value="purple">紫</option></select></p><p>請問你的性別:<br><input type="radio" name="sex" id="male" value="male">男<br><input type="radio" name="sex" id="female" value="female">女</p><p>你喜歡做些什麼:<br><input type="checkbox" name="hobby" id="book" value="book">看書<input type="checkbox" name="hobby" id="net" value="net">上網<input type="checkbox" name="hobby" id="sleep" value="sleep">睡覺</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p></form></body></html>
本文部分是一個表單，他以form標誌開始，其中裡邊有輸入框，有下拉式功能表，有單選項，有複選框，有文字的輸入框，有按鈕，我們看顯示的效果：
在CSS中的代碼大家自己理解，和之前講的都是一樣的。
我們接下來看像文字一樣的按鈕
我們先看一下效果：
下面我們看一下代碼是如何達到這個效果的，
<html><head><title>像文字一樣的按鈕</title><style><!--body{background-color:#daeeff;/* 頁面背景色 */}form{margin:0px; padding:0px;font:14px;}input{font:14px Arial;}.txt{border-bottom:1px solid #005aa7;/* 底線效果 */color:#005aa7;border-top:0px; border-left:0px;border-right:0px;background-color:transparent;/* 背景色透明 */}.btn{background-color:transparent;/* 背景色透明 */border:0px;/* 邊框取消 */}--></style> </head><body><form method="post">請輸入您的資訊: <input type="text" name="name" id="name" class="txt"><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn"></form></body></html>
其實我們的border-bottom設定為1px，其他的border-top、border-left、border-right邊框都設定為了0.然後設定一個顏色和背景色就實現了這個按鈕。而這個按鈕，我們講四個邊框都設定為0，而背景色設定為透明來實現像文字一樣的按鈕；通過這個我們可以看到，巧妙的使用CSS，能達到許多意想不到的效果。
Excel表格是在office軟體中非常受大家歡迎的一個軟體，而在網頁中我們來類比。我們先看看這個顯示效果：
我們可以像在office裡邊的excel一樣隨意的輸入東西，而不再有繁瑣的什麼輸入框。下面我們來看一下這個代碼：
<html><head><title>直接輸入的Excel表格</title><style><!--table.formdata{border:1px solid #5F6F7E;border-collapse:collapse;font-family:Arial;}table.formdata caption{text-align:left;padding-bottom:6px;}table.formdata th{border:1px solid #5F6F7E;background-color:#E2E2E2;color:#000000px;text-align:left;font-weight:normal;padding:2px 8px 2px 6px;margin:0px;}table.formdata td{margin:0px;padding:0px;border:1px solid #ABABAB;/* 儲存格邊框 */}table.formdata input{width:100px;padding:1px 3px 1px 3px;margin:0px;border:none;/* 輸入框不要邊框 */font-family:Arial;}.btn{border:1px solid #0083f2;font-family:Arial;}--></style> </head><body><form method="post"><table class="formdata"><caption>公司銷售統計表 2004～2007</caption><tr><th></th><th scope="col">2004</th><th scope="col">2005</th><th scope="col">2006</th><th scope="col">2007</th></tr><tr><th scope="row">硬碟(Hard Disk)</th><td><input type="text" name="harddisk2004" id="harddisk2004"></td><td><input type="text" name="harddisk2005" id="harddisk2005"></td><td><input type="text" name="harddisk2006" id="harddisk2006"></td><td><input type="text" name="harddisk2007" id="harddisk2007"></td></tr><tr><th scope="row">主板(Mainboard)</th><td><input type="text" name="mainboard2004" id="mainboard2004"></td><td><input type="text" name="mainboard2005" id="mainboard2005"></td><td><input type="text" name="mainboard2006" id="mainboard2006"></td><td><input type="text" name="mainboard2007" id="mainboard2007"></td></tr><tr><th scope="row">記憶體條(Memory Disk)</th><td><input type="text" name="memory2004" id="memory2004"></td><td><input type="text" name="memory2005" id="memory2005"></td><td><input type="text" name="memory2006" id="memory2006"></td><td><input type="text" name="memory2007" id="memory2007"></td></tr><tr><th scope="row">機箱(Case)</th><td><input type="text" name="case2004" id="case2004"></td><td><input type="text" name="case2005" id="case2005"></td><td><input type="text" name="case2006" id="case2006"></td><td><input type="text" name="case2007" id="case2007"></td></tr><tr><th scope="row">電源(Power)</th><td><input type="text" name="power2004" id="power2004"></td><td><input type="text" name="power2005" id="power2005"></td><td><input type="text" name="power2006" id="power2006"></td><td><input type="text" name="power2007" id="power2007"></td></tr><tr><th scope="row">CPU風扇(CPU Fan)</th><td><input type="text" name="cpufan2004" id="cpufan2004"></td><td><input type="text" name="cpufan2005" id="cpufan2005"></td><td><input type="text" name="cpufan2006" id="cpufan2006"></td><td><input type="text" name="cpufan2007" id="cpufan2007"></td></tr><tr><th scope="row">總計(Total)</th><td><input type="text" name="total2004" id="total2004"></td><td><input type="text" name="total2005" id="total2005"></td><td><input type="text" name="total2006" id="total2006"></td><td><input type="text" name="total2007" id="total2007"></td></tr></table><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"><input type="reset" value="Reset All" class="btn"></p></form></body></html>
我們說說是如何?這個效果的思路，首先本文部分是用一個表格來進行搭建，而將表單嵌套在表格裡邊，每一項都設定一個id，一個name。最後是一個按鈕；我們看CSS代碼，在表格中，我們將td儲存格他的邊框設定，而對於input這個文字框，我們將他的border設定為none，那麼這樣所實現的效果就是輸入的邊框被取消掉了，而真正取而代之的是表格的邊框，從而實現了這麼一個小技巧。通過這個執行個體，我們可以看到，巧妙的設定CSS，能達到很多你意想不到的效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
