B站coderwhy前端学习 day5表格作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>66的</title>
    <link rel="icon" href="../../../毕业文件/pr.jpg">
    <style>
        table{
            text-align:center;
            border-collapse:collapse;

        }
        /* 单元格宽度 */
        td{
            width:200px;
            height:45px;
        }
        /* 表头和标题设置 */
        [colspan],tr:nth-child(2){
            font-weight:700;
            color:black;
            font-size:25px;
            background-color: #fff;
        }
        /* 表头字体大小 */
        tr:nth-child(2){
            font-size:19px;  
        }
        /* 13:15设置 */
        span{
            font-weight:700;
        }
        /* 15:00散场设置 */
        span.time{
            font-size:11px; 
            font-weight:400;
        }
        /* 售价设置 */
        td:nth-of-type(4){
            color:red;
            font-weight:700;
        }
        /* 选座购票设置 */
       .choose{
           color:white;
           background-color: red;
           border:8px solid red ;
           font-weight:400;
           border-radius: 10px;
        }
       /* 每行的颜色 */
       tr:nth-child(2n+1){
          background-color:rgba(255,0,0,0.1) 
        }
        tr:nth-child(2n){
          background-color:rgba(0,0,0,0.1) 
        }
    </style>
</head>
<body>
    <table>
        <!-- 表格名称 -->
        <tr>
            <td colspan="5">影院放映列表</td>
        </tr>
        <tr>
            <td>放映时间</td>
            <td>语言版本</td>
            <td>放映厅</td>
            <td style="color:black">售价（元）</td>
            <td>选座购票</td>
        </tr>
        <tr>
            <td><span >13:15</span><br><span class="time">15:00散场</span> </td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥48.5</td>
            <td><span class="choose">选座购票</span></td>
        </tr>
        <tr>
            <td><span>13:15</span><br><span class="time">15:00散场</span></td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥48.5</td>
            <td><span class="choose">选座购票</span></td>
        </tr>
        <tr>
            <td><span>13:15</span><br><span class="time">15:00散场</span></td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥48.5</td>
            <td><span class="choose">选座购票</span></td>
        </tr>
        <tr>
            <td><span>13:15</span><br><span class="time">15:00散场</span> </td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥48.5</td>
            <td><span class="choose">选座购票</span></td>
        </tr>
        <tr>
            <td><span>13:15</span><br><span class="time">15:00散场</span></td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥48.5</td>
            <td><span class="choose">选座购票</span></td>
        </tr>
      
    </table>
</body>
</html>

效果如图：