Html用表格标签写一个课程表


效果图和代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>课程表</title>
        <style type="text/css">
            #tab{
                margin: 0 auto;
                width: 70%;
                height: 800px;
                font-size: 18px;
                font-weight: bold;
            }
            body{
                background-color: cadetblue;
            }
        </style>
    </head>
    <body>
        <h1 align="center" style="color: crimson;">欢迎进入课程表页面</h1>
        <!-- 表格属性
            align lefe、center、right 规定表格相对周围元素的对齐方式
            border 1或 ""             规定表格单元是否有边框
            width 像素或百分比         规定表格的宽度
            cellpadding              规定表格之间的空白,也就是内容与边框的距离
            cellspacing              规定单元格与单元格之间的距离
            
            thead:用于定义表格的头部,thead内部必须有tr标签,一般是位于第一行
            tbody:用于定义表格的主体,主要用于放数据本体
            
            合并单元格:
                rowspan="合并单元格的个数"    跨行合并
                colspan="合并单元格的个数"    跨列合并
         -->
        <table id="tab" border="3" cellpadding="20" cellspacing="1">
            <thead>
                <tr>
                    <th colspan="8">课程表</th>
                </tr>
                <tr><td></td>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">上午</td>
                    <td>大学英语(二)1-311</td>
                    <td rowspan="2">软件测试技术4-409</td>
                    <td rowspan="2">网页设计与制作4-409</td>
                    <td>大学英语(二)1-314</td>
                    <td></td>
                    <td rowspan="6"></td>
                    <td rowspan="6"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>毛中概论1-409</td>
                </tr>
                
                <tr>
                    <td rowspan="2">下午</td>
                    <td>Linux操作系统基础4-509</td>
                    <td rowspan="2"></td>
                    <td>毛中概论1-409</td>
                    <td rowspan="2">离散结构4-511B</td>
                    <td rowspan="2"></td>
                </tr>
                <tr>
                    <td>武术运动</td>
                    <td>Linux操作系统基础4-509</td>
                </tr>
                
                <tr>
                    <td rowspan="2">晚上</td>
                    <td rowspan="2"></td>
                    <td rowspan="2"></td>
                    <td>性健康教育1-235</td>
                    <td rowspan="2"></td>
                    <td rowspan="2">程序设计基础4-417</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            
            
        </table>
    </body>
</html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM