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

1 第6章CSS设置表格与表单样式 2 学习目标 什么是表格模型对数据表格应用样式 创建简单和复杂的表单布局对各种表单元素应用样式 掌握CSS中用列表制作各种菜单的方法 ppt中所有实例参考网页设计与制作电子教材及源代码 3 6 1 1表格模型 虽然我们不需要表格来进行网页布局了 但很多表格式的数据 还是需要表格这一形式发挥它的作用 另外可以通过元素将表格行聚类为组 可以构成更复杂的表格 4 6 1 1表格模型 用于指定表格标题行 如果打印的表格超过一页纸 应该在每个页面顶端出现 表格正文部分 将相关行集合在一起 一个表格可以有一个或多个部分 是表格标题行的低端补充 它是一组作为脚注的行 如果表格横跨多个页面 也应该重复 他们不但用于网页的分块显示 还能用来做表格的分页打印 就是表格自动分页的时候每页都带表头thead和表底tfoot 例如 5 6 1 1表格模型 一周安排表星期一星期二星期三星期四星期五上午学习学习下午游戏时间晚上学习休息时间 6 6 1 1表格模型 table caption side left 设置标题caption的位置 但ie浏览器不支持 默认位置是在表格上面居中显示 th的scope属性 scope属性定义了行或列的表头scope可以定义行或列的表头取值col 定义列表头row 定义行表头colgroup 定义列组的表头信息 是columngroup的缩写rowgroup 定义行组的表头信息 是rowgroup的缩写 7 6 1 1表格模型 summary属性代表HTML表格的摘要表格不仅可以有标题caption 还可以有一个摘要说明summary 摘要是不会显示出来的 通常是给一些其它的工具使用的 比如盲人阅读器等 由于摘要summary不会显示在浏览器中 所以可以尽可能的使摘要描述足够长 这样更有利于那些通过 听 的浏览者了解你的table表格 8 JsCIPPVRANK网站首页500047800ACSS2 0教程420041800A 9 6 1 1表格模型 HTML代码中没有任何表现的部分 不设置边距 定义表格边线 色彩等 所有表现的内容都分离到CSS里去 body 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边框合并 即如果相邻 则共用同一个边框 10 MrJin ath font size 14px font weight normal color 039 padding 10px8px border bottom 2pxsolid 6678b1 MrJin atd color 666 padding 9px8px0px8px MrJin atbodytr hovertd color 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与表单 16 CSS与表单 例如6 3 html 17 实例 表单元素文件Sample6 7 html彩色的下拉菜单综合实例 模仿新浪网民调查问卷 文件Sample6 9 html