第10讲设置表格样式剖析.ppt

第10讲 使用CSS美化表格 陕西新华电脑软件学校-电子商务教研组 陕西新华电脑软件学校-电子商务教研组 教学重难点 2 任务一 表格中的标签 表格能够做什么？ 任务一 表格中的标签 表格 (6-1.html) 任务二 表格的颜色、边框 使用CSS设置单元格内文字的颜色 实例：6-2.html 使用CSS设置单元格或表格大小和边框 知识点：border-collapse border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 任务二 表格的颜色、边框 浏览器支持 所有主流浏览器都支持 border-collapse 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。 （实例：6-3.html） 任务二 表格的颜色、边框 实例一：隔行变色 当表格的行和列都很多时，单元格若采用相同的背景色，会造成用户的使用不便，通常的解决办法是采用隔行变色 实例：WorldCup.html 学生演示：table1.html 任务二 表格的颜色、边框 实例二：鼠标经过时变色的表格 实例：table2.html tr:hover：鼠标悬停 学生演示： 鼠标经过时变色表格.html 任务二 表格的颜色、边框 实例：yueli.html 学生演示： 陕西新华电脑软件学校-电子商务教研组 本讲总结 本讲学习网页中表格的常用标签，以及表格背景和边框的设置。 10 陕西新华电脑软件学校-电子商务教研组 本讲作业 必做： 制作鼠标经过时变色的表格 提升练习 制作当月日历 11 陕西新华电脑软件学校-电子商务教研组