html日历课程表代码

顾国炎 3周前 12浏览 0评论

HTML日历课程表是一种基于HTML、CSS和JavaScript技术的课程表显示方式,可以显示一段时间内的课程安排,方便学生和老师管理课程时间。下面是一份简单的HTML日历课程表代码:

<html>
<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

td {
  height: 120px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
  </tr>
  <tr>
    <td>8:00-9:40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>10:00-11:40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>13:30-15:10</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>15:20-17:00</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>19:00-20:40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

以上代码使用table标签创建一个表格,其中包含6个列,分别是时间段和星期一至星期五。每个时间段使用td标签表示,每个时间段下的每个星期使用一个td标签表示。表格的样式使用CSS设置,在th标签下方的tr标签中包括星期一至星期五的表头,其余行中的td标签为空,可以根据具体情况将课程信息填入其中。