精通CSS+DIV网页样式与布局设置表单和表格_html/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标记开始表示的是整个表格，一个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
	
	
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一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下例子代码和运行效果：

小编寄语：该博文，小编主要简单的总结了CSS中关于如何设置表格和表单样式的相关知识点，主要讲解了六个方面的小知识，包括表格中的标记，表格中的颜色，隔行变色，表单中的元素，文字按钮，小试牛刀也就是模仿office做了一个可以编写的Excel表格，其中有一个小例子，就是模仿office中的Excel做一个可以编辑的表格，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。BS学习，未完待续......