使用CSS控制表格设计出课程表实验内容：编写一个网页，内容为本学期本班的课程表，并使用CSS设计课程表的显示样式

最新推荐文章于 2025-10-07 13:29:11 发布

原创最新推荐文章于 2025-10-07 13:29:11 发布 · 2.9k 阅读

22 ·

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

收录于

Javaweb实验

本文介绍了如何使用HTML创建一个课程表，并通过CSS进行美化。首先，创建一个包含本学期班级课程信息的表格，然后应用CSS来改进表格的视觉呈现。

（1）编写一个网页，内容为课程表表格；

（2）使用CSS美化

先来看看效果：

1.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实验1.2 使用CSS控制表格设计出课程表</title>
        <link rel="stylesheet" href="1.css">
    </head>
    <body background="1.jpg" background-size=50%;>
        <table border="1" cellpadding="20" cellspacing="0">
            <tr class="head">
              <td>节次/周次</td>
              <td>星期一</td>
              <td>星期二</td>
              <td>星期三</td>
              <td>星期四</td>
              <td>星期五</td>
            </tr>
            <tr>
              <td class="_1234">第一节</td>
              <td class=course rowspan="2">单片机</td>
              <td class=course rowspan="2">web程序设计</td>
              <td class=course rowspan="2">操作系统</td>
              <td class=course rowspan="2">web程序设计</td>
              <td> </td>

            </tr>
            <tr>
              <td class="_1234">第二节</td>
              <td> </td>
            </tr>
            <tr>
              <td class="_1234">第三节</td>
              <td class=course rowspan="2">形势与政策</td>
              <td class=course rowspan="2">编译原理</td>
              <td class=course rowspan="2">单片机原理与应用</td>
              <td class=course rowspan="2">编译原理</td>
              <td class=course rowspan="2">计算机网络安全</td>
            </tr>
            <tr>
              <td class="_1234">第四节</td>
            </tr>
            <tr>
              <td class="_5678">第五节</td>
              <td class=course rowspan="2">操作系统<br> </td>
              <td class=course rowspan="2">就业与创业指导<br> </td>
              <td class=course rowspan="2"> 计算机网络安全<br></td>
              <td> </td>
              <td> </td>
            </tr>
            <tr>
              <td class="_5678">第六节</td>
              <td> </td>
              <td> </td>
            </tr>
            <tr>
              <td class="_5678">第七节</td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
            </tr>
            <tr>
              <td class="_5678">第八节</td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
            </tr>
        
          </table>
        
    <body>
</html>

2.css

table{
    color:whitesmoke;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    margin-left:220px;
    width:980px;
    height:200px;
    border-color: cornflowerblue;
  }
  
  ._1234{
    background-color: black;
  }
  
  ._5678{
    background-color: green;
  }
  
  .course{
    background-color: #3b769d;
  }
  .head{
    background-color: #859d95;
  }

标签

#css #html #html5