精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose

表格和表单是网页中非常重要的两个元素，在上篇博客中，我们简单的介绍了CSS的页面背景设置，今天小编继续来介绍CSS的相关知识，在我们的CSS中如何设置表格和表单，首先，来看一张思维导图，通过图简单的预览一下该博文主要讲解哪些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一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下例子代码和运行效果：

公司销售统计表 2004～2007

	2004	2005	2006	2007
硬盘(Hard Disk)
主板(Mainboard)
内存条(Memory Disk)
机箱(Case)
电源(Power)
CPU风扇(CPU Fan)
总计(Total)

运行效果如下所示：

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