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

最新推荐文章于 2024-10-10 10:07:49 发布

H-Liberty

最新推荐文章于 2024-10-10 10:07:49 发布

阅读量1.2w

点赞数 8

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45915712/article/details/109522599

版权

这篇博客详细介绍了如何使用HTML和CSS创建一个网页课程表。从整体布局开始，通过添加表头数据，利用rowspan属性合并上下单元格来填充课表信息，再到美化页面，设置单元格间距和背景颜色。最后展示了完成后的视觉效果。

摘要由CSDN通过智能技术生成

使用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