table表格元素：隔行添加背景色，合并单元格

1、表格隔行添加背景色，以及表格的一些基本属性的设置：

隔行添加背景色：可以借助伪类选择器:nth-child，匹配一列兄弟元素中的元素

将边框会合并为一个单线的边框：border-collapse: collapse;

        table,table tr td{ 
            border:1px solid #f1c0c0; 

            /* 将边框会合并为一个单线的边框 */
            border-collapse: collapse;
        }
        table tr td{
            padding: 5px 10px;
            width: 100px;

        }

        /* caption-side:改变标题的位置 */
        /* caption{
            caption-side: bottom;
        } */
    

        /* 表头，以及表格隔行添加背景色的CSS样式 */

        /* th 标签是与 td 标签同级的，是用来定义表头单元格的，默认是加粗，居中显示的 */
        table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}

        /* :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素(n 可以是数字、关键词或公式)； :odd选取的是奇数；:even选取的是偶数。 */
        table tr:nth-child(even){background:#F4F4F4;}

        /* 第五行 */
        table tr:nth-child(5){background:#a5e1d4;color:#FFF;}

        table tr:hover{background:#9ec3e0;color:#FFF;font-size: 40px;}

        table td:nth-child(odd){color:rgb(112, 174, 81);}

        table td,table th{border:1px solid #EEE;}

<table>
        <caption>各省的市</caption>
        <tr>
            <th>广东</th>
            <th>江苏</th>
            <th>浙江</th>
            <th>福建</th>
            <th>内蒙古</th>
            <th>新疆</th>
        </tr>
        <tr>
            <td>广州</td>
            <td>苏州</td>
            <td>杭州</td>
            <td>福州</td>
            <td>呼和浩特</td>
            <td>乌鲁木齐</td>
        </tr>
        ....
</table>

效果图：

2、合并单元格

    colspan：列合并； rowspan：行合并

    合并后算一个格子，要注意合并之后样式的选择是根据代码的顺序显示的

<table>
        <tr>
            <td colspan="2" rowspan="2">星期一</td>
            <!-- <td>星期二</td> -->
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            
        </tr>
        <tr>
            <!-- <td></td> -->
            <td>晴天</td>
            <td rowspan="2">下雨天</td>
            <td></td>
        </tr>
        <tr>
            <td>阴天</td>
            <td>风暴</td>
            <td></td>
            <!-- <td></td> -->
            <td>雪天</td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3">！</td>
            <!-- <td></td>
            <td></td> -->
            <td></td>
        </tr>
    </table>

效果图：