CSS设置表格与表单样式

单击此处编辑母版标题样式,*,第,6,章,CSS设置表格与表单样式,1,学习目标,什么是表格模型,对数据表格应用样式。,创建简单和复杂的表单布局,对各种表单元素应用样式。,掌握,CSS,中用列表制作各种菜单的方法。,ppt,中所有实例参考,网页设计与制作电子教材及源代码,2,6.1.1,表格模型,虽然我们不需要表格来进行网页布局了，但很多表格式的数据，还是需要表格这一形式发挥它的作用！,另外可以通过,元素将表格行聚类为组，可以构成更复杂的表格。,3,6.1.1,表格模型,用于指定表格标题行，如果打印的表格超过一页纸，,应该在每个页面顶端出现。,表格正文部分，将相关行集合在一起。一个表格可以有一个或多个,部分。,是表格标题行的低端补充，它是一组作为脚注的行，如果表格横跨多个页面，也应该重复。,他们不但用于网页的分块显示，还能用来做表格的分页打印，就是表格自动分页的时候每页 都带表头,thead,和表底,tfoot,。,例如：,4,6.1.1,表格模型,一周安排表,星期一,星期二,星期三,星期四,星期五,上午,学习,学习,下午,游戏时间,晚上,学习,休息时间,5,6.1.1,表格模型,table,caption-,side:left,;,设置标题,caption,的位置，但,ie,浏览器不支持，默认位置是在表格上面居中显示。,th,的,scope,属性：,scope,属性定义了行或列的表头,scope,可以定义行或列的表头取值,col,-,定义列表头,row-,定义行表头,colgroup,-,定义列组的表头信息,是,columngroup,的缩写,rowgroup,-,定义行组的表头信息,是,rowgroup,的缩写,6,6.1.1,表格模型,summary,属性代表,HTML,表格的摘要,表格不仅可以有标题,caption,，还可以有一个摘要说明,summary,。摘要是不会显示出来的，通常是给一些其它的工具使用的，比如盲人阅读器等。,由于摘要,summary,不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解你的,table,表格。,7,JsCIPPVRANK,网站首页,500047800ACSS2.0,教程,420041800A+,8,6.1.1,表格模型,HTML,代码中没有任何表现的部分，不设置边距，定义表格边线，色彩等。所有表现的内容都分离到,CSS,里去。,bodyline-height:20px;#,MrJin_a,font-size:12px;background:#,fff,;margin:45px;width:480px;border-collapse:collapse;text-align:left;,border-collapse,边框合并属性，该,CSS,属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框。,值：,separate,缺省值。边框分开，不合并。,collapse,边框合并。即如果相邻，则共用同一个边框。,9,#,MrJin_a,th,font-size:14px;font-weight:normal;color:#039;padding:10px8px;border-bottom:2pxsolid#6678b1;#,MrJin_a,tdcolor:#666;padding:9px8px0px8px;#,MrJin_a,tbody,tr:hover,tdcolor:#03c;,10,6.1.2,表格的颜色,表格颜色的设置与文字颜色的设置完全一样，通过,color,属性设置表格中文字的颜色，通过,background,属性设置表格的背景颜色。,如文件,Sample6-2.html,所示：,11,6.1.3,表格的边框,在,CSS,中设置边框同样是通过,border,属性，设置方法跟图像的边框完全一样，只不过在表格中需要特别注意单元格之间的关系，需要为单元格也单独设置相应的边框。,如文件,Sample6-3.html,所示：,12,应用实例：,表格实例,1,隔行变色,(,文件,Sample6-4.html),表格实例,2,鼠标经过时变色的表格,(,文件,Sample6-5.html),表格实例,3,日历,(,文件,Sample6-6.html),13,CSS,与表单,表单是网页与用户交互不可缺少的元素，在传统的,HTML,中对表单元素的样式控制很少，仅局限于功能上的实现,表单中的元素很多，包括常用的,输入框、文本框、单选钮、复选框、下拉菜单和按钮,等。,14,CSS,与表单,HTML,标签,功能,创建,Reset,、,Submit,或者其他可编程下压按钮,组合相关的表单控件,创建可编程的下压按钮,创建复选框,从用户的计算机系统选择用于上传的文件,创建隐藏字段,创建图像创建,Submit,按钮,创建密码文本字段,创建单选按钮中的一个按钮,创建,Reset,按钮,15,CSS,与表单,HTML,标签,功能,创建,Submit,按钮,创建单行文本字段,为表单元素提供文本标签,为,提供文本标签,组合相关,元素,指定,菜单中的一个选择,创建下拉菜单或者可滚动菜单,创建多行文本输入框,例如,6-3.html,16,实例：,表单元素文件,Sample6-7.html,彩色的下拉菜单,综合实例,模仿新浪网民调查问卷,(,文件,Sample6-9.html),17,