CSS设置表格与表单样式.ppt

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