学习任务

      先观看“表格标记”和“边框属性”视频，然后制作完成细线表格和斑马线表格。

学习目标

    1.熟悉表格相关标记

    2.掌握使用边框属性

观看视频

任务要求

    任务1：制作细线表格

    （1）表格分为4行3列，第一行跨3列（colspan=3）

    （2）合理设置表格单元格的宽度和高度、背景色（#D5EEED）

    （3）鼠标移动到每个单元格，单元格的背景色发生变化

     参考代码（点击查看）

    任务2：制作斑马线表格

    （1）斑马线表格只有上下边框，没有左右边框

    （2）最上面和最下面的边框要比其他边框粗

    （3）奇数行和偶数行颜色不同

    tr:nth-child(odd)  td{                    /*  :nth-child(n)是CSS3选择器  */

         background-color:#f6f6f6;       /*  设置奇数行(odd)的背景色为灰色  */

     }

     斑马线表格的html代码（点击查看）

     斑马线表格的CSS代码（点击查看）

拓展训练

    制作下面的表格：

参考代码

    HTML代码（点击查看）

    CSS代码（点击查看）