CSS表格和表单【通用】.ppt

CSS设置表格和表单 组长 王蓉 组员 冯权 于琪炜 参考资料：《CSS彻底研究》 博客园 表格 控制表格 1.表格中的标记 caption定义表格的大标题 th定义表头 table定义整个表格 tr定义一行 td定义一个单元格 控制表格 2.表格的边框 .ranking{ font: 14px 宋体; border:2px orange solid; text-align:center; border-spacing:10px;} .ranking td{ border:1px orange dashed;} .ranking th{ border:1px orange solid;} 控制表格 设置单元格的边框 相邻的单元格有各自的边框，可以在表格样式中增加一个属性设置： border-collapse：collapse; 相邻单元格之间原来的两条边框重合成一条了。 控制表格 相邻边框合并 在CSS的规范中对边框合并有以下定义： a. 如果边框的“border-style”设置为“hidden”，那么它的优先级高于 任何其他相冲突的边框。 b. 如果边框的属性中有“none”，那么它的优先级最低。 c. 如果边框中都没有被设置为“hidden”，并且至少有一个不是“none”，那么重合的边框中粗的优先于细的。 d. 如果边框样式的其它设置都相同，只是颜色区别，那么单元格的样式最优先，然后依次是行、行组、列、列组、表格。 控制表格 边框的分离 a. 对td使用padding，实现cellpadding的作用。 b. 对table使用border-spacing，实现cellspacing的作用。 padding值为5px； 控制表格 3.表格宽度的确定 方式一：自动方式（与表格内部的内容相关） 它会根据单元格中内容的多少进行调整。不是width属性设置。通常取值为“auto”。（不严格） 方式二：固定方式（与表格内部的内容无关） 表格的水平布局不依赖于单元格的内容，而明确地由width属性指定。（严格） 这个日历就使用了固定方式。 控制表格 4.其它与表格相关的标记 thead表头部分 tbody表内容部分 tbody th{}//只对tbody中的th产生作用。 tfoot表注部分 col 对应于表格中的一列，对需要单独设置的列设置一个类别，然后设置该类别的CSS即可。 GO 美化表格 1.隔行变色 为了避免浏览者看错行的情况，为表格设置隔行变色的效果。 在CSS中实现隔行变色的方法很简单，只要给偶数行的tr标记都添上相应的类型，然后对其进行CSS设置即可。 GO 美化表格 2.鼠标经过变色（高亮） 在Firefox中显示 只需要通过CSS的“：hover”伪类便可以达到效果，添加如下代码： tr:hover{background-color:#595;color:#fff} 在IE中显示 相比要麻烦些，不仅要设置CSS，还要增加一段javascript代码。当然，在Firefox中也可以显示正常效果。 GO 美化表格 3.二维变色提示 随时以高亮的方式提示一个单元格对应的行号（名）和列号（名） 这里要达到的效果是使鼠标指针经过的单元格，以及该单元格所在的行和列的第一个单元格的背景变色。 这个效果单纯使用CSS是无法实现的，必须使用javascript来实现。 GO 多视图模式日历 多视图模式日历—中视图模式 1.建立简单的表格，包括标题和表头。 table class=month summary=Calendar for 2007.10 captionspan class=date2007年10月 /span a href=calendar-small.html小模式/a | a中模式/a | a href=calendar-large.html大模式/a/caption tr th scope=colspan星期/span一/th th scope=colspan星期/span二/th th scope=colspan星期/span三/th th scope=colspan星期/span四/th th scope=colspan星期/span五/th th scope=colspan星期/span六/th th scope=colspan星期/span日/th /tr 多视图模式日历—中视图模式 2.每天的日程放在具体的单元格中。