CSS设置表格与表单样式

1、1,第6章 CSS设置表格与表单样式,2,学习目标,什么是表格模型 对数据表格应用样式。 创建简单和复杂的表单布局 对各种表单元素应用样式。 掌握CSS中用列表制作各种菜单的方法。 ppt中所有实例参考网页设计与制作电子教材及源代码,3,6.1.1 表格模型,虽然我们不需要表格来进行网页布局了，但很多表格式的数据，还是需要表格这一形式发挥它的作用！ 另外可以通过元素将表格行聚类为组，可以构成更复杂的表格。,4,6.1.1 表格模型,用于指定表格标题行，如果打印的表格超过一页纸， 应该在每个页面顶端出现。 表格正文部分，将相关行集合在一起。一个表格可以有一个或多个部分。 是表格标题行的低端补充，

2、它是一组作为脚注的行，如果表格横跨多个页面，也应该重复。 他们不但用于网页的分块显示，还能用来做表格的分页打印，就是表格自动分页的时候每页 都带表头thead和表底tfoot。 例如：,5,6.1.1 表格模型, 一周安排表 星期一星期二星期三星期四星期五 上午学习学习 下午游戏时间 晚上学习休息时间 ,6,6.1.1 表格模型,table caption-side:left; 设置标题caption的位置，但ie浏览器不支持，默认位置是在表格上面居中显示。 th的scope属性： scope属性定义了行或列的表头scope可以定义行或列的表头取值col-定义列表头row-定义行表头colgr

3、oup-定义列组的表头信息,是columngroup的缩写rowgroup-定义行组的表头信息,是rowgroup的缩写,7,6.1.1 表格模型,summary属性代表HTML表格的摘要表格不仅可以有标题caption，还可以有一个摘要说明summary。摘要是不会显示出来的，通常是给一些其它的工具使用的，比如盲人阅读器等。 由于摘要summary不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解你的table表格。,8,JsCIPPVRANK网站首页500047800ACSS2.0教程420041800A+,9,6.1.1 表格模型,HTML代码中

4、没有任何表现的部分，不设置边距，定义表格边线，色彩等。所有表现的内容都分离到CSS里去。 bodyline-height:20px;#MrJin_afont-size:12px;background:#fff;margin:45px;width:480px;border-collapse:collapse;text-align:left;,border-collapse边框合并属性，该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框。 值： separate缺省值。边框分开，不合并。 collapse边框合并。即如果相邻，则共用同一个边框。,10,#MrJin_athf

5、ont-size:14px;font-weight:normal;color:#039;padding:10px8px;border-bottom:2pxsolid#6678b1;#MrJin_atdcolor:#666;padding:9px8px0px8px;#MrJin_atbodytr:hovertdcolor:#03c;,11,6.1.2表格的颜色,表格颜色的设置与文字颜色的设置完全一样，通过color属性设置表格中文字的颜色，通过background属性设置表格的背景颜色。 如文件Sample6-2.html所示：,12,6.1.3表格的边框,在CSS中设置边框同样是通过border属性，设置方法跟图像的边框完全一样，只不过在表格中需要特别注意单元格之间的关系，需要为单元格也单独设置相应的边框。 如文件Sample6-3.html所示：,13,应用实例：,表格实例1隔行变色(文件Sample6-4.html) 表格实例2鼠标经过时变色的表格(文件Sample6-5.html) 表格实例3日历(文件Sample6-6.html),14,CSS与表单,表单是网页与用户交互不可缺少的元素，在传统的HTML中对表单元素的样式控制很少，仅局限于功能上的实现 表单中的元素很多，包括常用的输入框、文本框、单选钮、复选框、下拉菜单和按钮等。,15,CSS与