精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。
首先表格中的标记：我们看一下代码：
这些标记：tr、th、td都是组成表格不可缺少的元素。
刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢：我们看一下代码
对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，对于长期面对显示器的人来说，是经常找不到数据的。而隔行变色就能解决这个问题，我们看这个效果：
下面我们看隔行表示显示的代码：
在CSS中的代码大家自己理解，和之前讲的都是一样的。
我们接下来看像文字一样的按钮
我们先看一下效果：
下面我们看一下代码是如何达到这个效果的，
我们可以像在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，能达到很多你意想不到的效果。
