html绘制课程表

最新推荐文章于 2025-09-10 19:54:58 发布

原创最新推荐文章于 2025-09-10 19:54:58 发布 · 1.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML/CSS 专栏收录该内容

24 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>课程表</title>
    <style type="text/css">
        table{
            border-collapse: collapse; 
        }
        td{
            border: 1px solid red;
        }
        #middle{
            height: 15px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>时间</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
        <!-- 行跨度2 -->
            <td rowspan="2">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>物理</td>
            <td>美术</td>
            <td>线代</td>
            <td>化学</td>
            <td>英语</td>
        </tr>
        <tr>
        <!-- 列跨度 -->
            <td id="middle" colspan="6"></td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>物理</td>
            <td>英语</td>
            <td>数学</td>
            <td>体育</td>
            <td>思修</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>物理</td>
            <td>地理</td>
            <td>历史</td>
            <td>大扫除</td>
        </tr>
    </table>
</body>
</html>

效果：
这里写图片描述