CSS设置表格样式[精].pptVIP

CSS设置表格样式 主讲：毛丽娟 email:maolj@ 表格中的标记 caption:定义表格的大标题，习惯放在表格定义的第一行，即紧随table标记。 th标记：表头标记，用于行或列的名称。 thead、tbody、tfoot:用来定义表格的不同部分，称为“行组”。 col:列标记。 案例1：制作如下效果的表格。 样式要求： 外边框属性为：1px solid red; 表头边框属性为:1px solid red; 普通单元格的边框属性为：1px dashed red; 案例要点分析： Css选择器的类型？ th的使用？ 相邻边框线的合并属性border-collapse? 相邻边框的合并规则？ 相邻边框的合并规则 粗的优先于细的。如果几个边框的border-width相同，则优先次序由高到低是：double、solid、dashed、dotted、ridge、outset、groove、inset。 如果边框的border-style设置为hidden，则优先级最高。 如果边框的属性中有“none”，优先级最低。 案例1：网页结构代码 table !--行表头，即列标题-- tr th姓名/th th高数/th th物理/th th组成原理/th th总分/th /tr !--行表头结束-- 案例1：网页结构代码 tr th张三/th td77/td td66/td td78/td td150/td /tr th李斯/th td88/td td80/td td86/td td160/td /tr 案例2：美化表格。 利用caption、thead、tbody、tfoot标记设置如下格式： 案例3：美化表格——立体效果 案例3分析 关键技术： 设置单元格的相应的边框属性 td,th{ padding:5px; border:2px solid #EEE; border-bottom-color:#666; border-right-color:#666; } 练习：表格的立体效果 练习：样式代码 table { width:400px; border:none; /*border-collapse:collapse;*/ background: #CCC; } td,th{ border: 2px solid #FFF; border-right-color: #666; border-bottom-color:#666; } 案例4：美化表格——斑马纹效果 案例5：设置表格的列样式 要点分析 在tbody标记前增加列标记 col /col/col/col class=right /col/ 建立样式col.right{…} 说明：col/是标准的HTML元素，由于CSS规范 和HTML规范之间的一些不一致，导致Firefox不支持col/标记。 案例5：结构代码 table width=400 border=0 cellspacing=0 caption成绩表/caption thead tr th姓名/th th高数/th th物理/th th组成原理/th th总分/th /tr /thead 案例5：结构代码 tbody tr class=even th张三/th td77/td td66/td td78/td td150/td /tr 案例5：结构代码 tr th李斯/th td88/td td80/td td86/td td160/td /tr tr class=even th赵谦/th td98/td td57/td td90/td td145/td /tr 案例5：结构代码 tr th文章/th td67/td td90/td td69/td td178/td /tr /tbody tfoot tr th平均分/th td colspan=463.00/td /tr /tfoot /table 案例5：样式代码 table { font-family: 隶书; font-size: 16px; text-align: center; border: none; } thead,tfoot { backg