用table代码编写课程表框架内容

img

corspan列跨度 rowspan 行跨度 利用好这两个属性就可以熟练的利用表格来进行布局
你题目的解答代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
</head>
<style type="text/css">
    th,td {
        text-align: center;
    }
</style>
<body>
    <table width="800" height="600" border="1" cellspacing="0">
        <tr>
            <th colspan="2">时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>1 2节</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>3 4节</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>5 6节</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>7 8节</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>晚上</td>
            <td>9 10节</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>

    </table>
</body>

</html>

如有帮助,望采纳!谢谢!

img