用HTML制作一个课程表

最新推荐文章于 2024-08-04 20:38:28 发布

G计算机1903袁慧强

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量1.7k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/2201_75650749/article/details/132951414

版权

表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）

这是运行效果图

以下是课程表的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            table {
                border: 3px solid #ccc;
                border-collapse: collapse;
                margin: 0 auto;
                text-align: center;
            }
 
            td {
                border: 3px solid #ccc;
                height: 100px;
            }
			
 
            .a {
                background-color:yellow;
            }
			.b {
			    background-color:yellow;
			}
			.c {
			    background-color:yellow;
			}
			
 
            .d{
                background-color:yellow;
            }
			.e{
			    background-color:yellow;
			}
        </style>
    </head>
    <body>
        <table>
            <tr class="e">
                <td></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr class="a">
                <td>第一二节</td>
                <td></td>
                <td>人工智能与应用<br />徐国清<br />G计算机1903</td>
                <td>企业网站综合实训<br />付显<br />G计算机1903</td>
                <td>信息安全<br />华隆<br />G计算机1903</td>
                <td></td>
            </tr>
            <tr class="b">
                <td>第三四节</td>
                <td>形势与政策9<br />赵国峰<br />G计算机1903</td>
                <td></td>
                <td></td>
                <td>前端框架技术<br />岳小兵<br />G计算机1903</td>
                <td>计算机网络基础<br />任海留洋<br />G计算机1903</td>
            </tr>
            <tr class="c">
                <td>第五六节</td>
                <td>企业网站综合实训<br />付显<br />G计算机1903</td>
                <td></td>
                <td></td>
                <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td>
                <td></td>
            </tr>
            <tr class="d">
                <td>第七八节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td>
            </tr>
        </table>
    </body>
</html>

以上是简单的HTML表格用来展示一个星期的课程安排。

表格使用了css样式来美化。