首先我们的首先表格中的标记，代码和运行效果如下所示：
年度收入 年度收入 2004 - 2007 2004 2005 2006 2007 拨款 11,980 12,650 9,700 10,600 捐款 4,780 4,989 6,700 6,590 投资 8,000 8,100 8,760 8,490 募捐 3,200 3,120 3,700 4,210 销售 28,400 27,100 27,950 29,050 杂费 2,100 1,900 1,300 1,760 总计 58,460 57,859 58,110 60,700运行效果如下所示：
这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，运行效果如上图所示。这些标记：tr、th、td都是组成表格不可缺少的元素。刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢？看我们接下来的例子代码和运行效果：
年度收入 年度收入 2004 - 2007 2004 2005 2006 2007 拨款 11,980 12,650 9,700 10,600 捐款 4,780 4,989 6,700 6,590 投资 8,000 8,100 8,760 8,490 募捐 3,200 3,120 3,700 4,210 销售 28,400 27,100 27,950 29,050 杂费 2,100 1,900 1,300 1,760 总计 58,460 57,859 58,110 60,700运行效果如下：
分析上面的代码我们可以看出，在table这里用一个class=“datalist”来将整个表格的CSS定义出来，body设置了背景颜色以及对齐方式；dataList设置了表格文字颜色、表格背景色以及表格字体；datalist caption设置了标题，就看到了我们上述的效果，对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，不便于数据的查找。而隔行变色就能解决这个问题，看下面的例子代码和运行效果：
Member List Member List Name Class Birthday Constellation Mobile isaac W13 Jun 24th Cancer 1118159 girlwing W210 Sep 16th Virgo 1307994 tastestory W15 Nov 29th Sagittarius 1095245 lovehate W47 Sep 5th Virgo 6098017 slepox W19 Nov 18th Scorpio 0658635 smartlau W19 Dec 30th Capricorn 0006621 whaler W19 Jan 18th Capricorn 1851918 shenhuanyan W25 Jan 31th Aquarius 0621827 tuonene W210 Nov 26th Sagittarius 0091704 ArthurRivers W91 Feb 26th Pisces 0468357 reconzansp W09 Oct 13th Libra 3643041 linear W86 Aug 18th Leo 6398341 laopiao W41 May 17th Taurus 1254004 dovecho W19 Dec 9th Sagittarius 1892013 shanghen W42 May 24th Gemini 1544254 venessawj W45 Apr 1st Aries 1523753 lightyear W311 Mar 23th Aries 1002908运行效果如下：
分析一下上面的代码，正文部分把奇数行和偶数行都写上了，属性值大家都可以看出来，值得一提的是这里的altrow,如果设置了这个的属性，那么他将覆盖其他颜色，而是用自己的颜色，这就实现了隔行变色的效果。那么接下来我们再看看CSS是如何控制表单的呢？例子代码和运行效果如下所示：
表单运行效果如下所示：
分析一下上面例子，正文部分是一个表单，他以form标志开始，其中里边有输入框，有下拉菜单，有单选项，有复选框，有文字的输入框，有按钮，运行效果如上图所示，我们接下来看像文字一样的按钮，我们来看一下例子代码和运行效果：
像文字一样的按钮运行效果如下所示：
分析一下上面的例子，在上面的例子中，我们把border-bottom设置为1px，其她的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了像文字一样的按钮。而这个按钮，我们讲四个边框都设置为0，而背景色设置为透明来实现像文字一样的按钮；通过这个我们可以看到，巧妙的使用CSS，能带给我们很多惊喜。Excel表格是在office软件中非常受大家欢迎的一个软件，而在网页中我们来模拟。在我们的CSS中，我们可以像在office里边的excel一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下例子代码和运行效果：
直接输入的Excel表格运行效果如下所示：
小编寄语：该博文，小编主要简单的总结了CSS中关于如何设置表格和表单样式的相关知识点，主要讲解了六个方面的小知识，包括表格中的标记，表格中的颜色，隔行变色，表单中的元素，文字按钮，小试牛刀也就是模仿office做了一个可以编写的Excel表格，其中有一个小例子，就是模仿office中的Excel做一个可以编辑的表格，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。BS学习，未完待续......
查看更多关于精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose的详细内容...