使用HTML&CSS创建一个网页课程表

使用HTML&CSS创建一个网页课程表

整体布局

对于课程表，其实就是一个表格，其中加入CSS样式。
因此，我们先创建一个九行八列的表格（以我的课表为例）。在这里插入图片描述

在这里插入图片描述

<table border="1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    ...<!--这里省略7对<td> </td> -->
  </tr>
  ...<!--这里省略7对<tr> </tr> -->
</table>

加入表头数据

在第一行第一列加入内容，这个时候就是一张数据为空的表
在这里插入图片描述

<table border="1" cellpadding="20" cellspacing="0">
    <tr class="head">
      <td>节次/周次</td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
      <td>星期六</td>
      <td>星期天</td>
    </tr>
    <tr>
      <td class="_1234">第一节</td>
      <td> </td>
      ...
      </tr>
      ...

合并上下单元格并加入课表信息

rowspan属性：合并上下单元格
rowspan=2的意思就是这个单元格上下连跨了2格,
合并单元格之后，相应的单元格标记就会减少，例如这里第二节星期二单元格的和标记就要被去掉了。如果不去掉，将出现以下的情况。
在这里插入图片描述

在这里插入图片描述

<tr>
      <td class="_1234">第一节</td>
      <td> </td>
      <td class=course rowspan="2">数据结构<br>教师：张*<br></td>
      <td class=course rowspan="2">大学英语3<br>教师：陈*<br></td>
      <td class=course rowspan="2">面向对象程序设计（Java）A<br>教师：文*<br></td>
      <td class=course rowspan="2">数据结构<br>教师:张*<br></td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_1234">第二节</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>

美化页面

1.课表的单元格之间只有一条线，使用cellspacing=“0”

<table border="1" cellspacing="0">

2.对于表格的各种属性，我们在css文件中进行编辑

table{
  color:black;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  margin-left:220px;
  width:980px;
  height:200px;
  border-color: cornflowerblue;
}

注意：
写在css文件中的样式，需要在html文件中引入，
使用link

<link rel="stylesheet" href="css/index.css">

3.对单元格背景选色，我们使用class选择器
比如：第一节-第四节为黄色
第五-第八为绿色
课程内容为蓝色（这里的蓝色，是之间选的，不是那个blue的颜色值）
！！！ID属性不要以数字开头

._1234{
  background-color: yellow;
}
._5678{
  background-color: green;
}
.course{
  background-color: #3b769d;
}

最终效果

在这里插入图片描述

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>课程表</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/index.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <!-- Add your site or application content here -->
  <p>2020-2021学年1学期</p>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <table border="1" cellpadding="20" cellspacing="0">
    <tr class="head">
      <td>节次/周次</td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
      <td>星期六</td>
      <td>星期天</td>
    </tr>
    <tr>
      <td class="_1234">第一节</td>
      <td> </td>
      <td class=course rowspan="2">数据结构<br>教师：张*<br></td>
      <td class=course rowspan="2">大学英语3<br>教师：陈*<br></td>
      <td class=course rowspan="2">面向对象程序设计（Java）A<br>教师：文*<br></td>
      <td class=course rowspan="2">数据结构<br>教师:张*<br></td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_1234">第二节</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_1234">第三节</td>
      <td> </td>
      <td class=course rowspan="2">数据库原理及应用A<br>教师：曾*<br> </td>
      <td class=course rowspan="2">体育3<br>马*<br> </td>
      <td class=course rowspan="2"> 数据库原理及应用A<br>教师：曾*<br></td>
      <td class=course rowspan="2">Linux体系和编创<br>教师：王*<br> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_1234">第四节</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_5678">第五节</td>
      <td class=course rowspan="2">面向对象程序设计（Java）A<br>教师：文*<br> </td>
      <td> </td>
      <td class=course rowspan="2">面向对象分析与设计（UML）<br>教师：赵*<br> </td>
      <td> </td>
      <td class=course rowspan="2"> 大学英语3<br>教师：陈*<br></td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_5678">第六节</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_5678">第七节</td>
      <td class=course rowspan="2">面向对象分析与设计（UML）<br>教师：赵* </td>
      <td class=course rowspan="2">Linux体系和编创<br>教师：王*<br> </td>
      <td class=course rowspan="2">工程经济学<br>教师：何*<br> </td>
      <td> </td>
      <td class=course rowspan="2">形势与政策2<br>教师：于*<br> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td class="_5678">第八节</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>

  </table>

</body>

</html>



table{
  color:black;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  margin-left:220px;
  width:980px;
  height:200px;
  border-color: cornflowerblue;
}

._1234{
  background-color: yellow;
}

._5678{
  background-color: green;
}

.course{
  background-color: #3b769d;
}
.head{
  background-color: #859d95;
}

p{

  text-align:center;

}
版权声明：本文为qq_45915712原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。