HTML制作简单课表

这篇文章适合新手使用HTML+CSS制作一张简单美观的学生课表

这个案例是我Web技术的一个实验小作业，也是我作为新手制作的第一个HTML表格，虽然制作中会有一些问题，但还是最终被我克服并完成了

效果图

本案例最直观最突出的可能就是它的简洁特色了，只写出必要的信息而省去不必要的装饰，避免表格的单调，添加了色彩，使表格更具有丰富性得同时，又突出了表格的重点所在位置，一举两得。除此之外，这个表格并没有设置表格边框，不局限于传统的表格，突出简洁的主题的同时又让人一样看出不同。

接下来说一下HTML表格制作的一些小知识吧。

首先是HTML 表格的基本结构：

<table>…</table>

：定义表格**

<th>…</th>

：定义表格的标题栏（文字加粗）**

<tr>…</tr>

：定义表格的行**

<td>…</td>

：定义表格的列**

我是新手代码有点长别在意啊

**实现代码如下 **

<html>
<head>
<title>课表</title>
<style>
.td{
     width:60px;
     height=900px;
}
</style>
</head>
<body>
<table>
<tr align=center>
      <td></td>
      <td class="td">周一</td>
      <td class="td">周二</td>
      <td class="td">周三</td>
      <td class="td">周四</td>
      <td class="td">周五</td>
      <td class="td">周六</td>
      <td class="td">周天</td>
    </tr>

<tr  align=center>
    <td class="td"><font size="3">1</font><br><font size="1">8:00<br>8:45</font> </td>
    <td class="td" rowspan="2" bgcolor="#FFB677">Web技<br>术<br>教3-<br>105<br></td>
    <td class="td" rowspan="2" bgcolor="#6CD4E1">移动应<br>用程序<br>开发<br>教3-<br>104<br> </td>
    <td class="td" rowspan="2" bgcolor="#FF8465">深度学<br>习<br>教4-<br>104<br> </td>
    <td> </td>
    <td class="td" rowspan="2" bgcolor="#D8D8D8">移动应<br>用程序<br>开发<br>教3-<br>104<br> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">2</font><br><font size="1">8:50<br>9:35</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3" >3</font><br><font size="1">9:50<br>10:35</font> </td>
    <td class="td" rowspan="2" bgcolor="#FFB677">深度学<br>习<br>教4-<br>104<br> </td>
    <td> </td>
    <td> </td>
    <td class="td" rowspan="2" bgcolor="#88E5DA">Web技<br>术<br>教3-<br>105<br></td>
    <td class="td" rowspan="2" bgcolor="#6CD4E1">学习科<br>学与技<br>术（双语）<br>教3-<br>104<br></td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">4</font><br><font size="1">10:40<br>11:25</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">5</font><br><font size="1">11:30<br>12:15</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">6</font><br><font size="1">13:45<br>14:30</font> </td>
    <td class="td" rowspan="2" bgcolor="#88E5DA">教育研<br>究方法<br>教3-<br>104</td>
    <td class="td" rowspan="2" bgcolor="#FFB677">教育数<br>据挖掘<br>与学习<br>分析<br>教3-<br>104</td>
    <td> </td>
    <td class="td" rowspan="2" bgcolor="#F4C762"> 毛泽东<br>思想和<br>中国特<br>色社...<br>教3-<br>408</td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">7</font><br><font size="1">14:35<br>15:20</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">8</font><br><font size="1">15:35<br>16:20</font> </td>
    <td class="td" rowspan="2" bgcolor="#FF8465"> 毛泽东<br>思想和<br>中国特<br>色社...<br>教3-<br>408</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td class="td" rowspan="2" bgcolor="#B2ED75"> +<br>添加<br>课程</td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">9</font><br><font size="1">16:25<br>17:10</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">10</font><br><font size="1">18:30<br>17:15</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td> 
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">11</font><br><font size="1">19:25<br>20:10</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
<tr align=center>
    <td class="td"><font size="3">12</font><br><font size="1">20:20<br>21:05</font> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

代码中并没有注释，是因为我还是HTML新手小白的原因，所以还是在最后做一些说明吧。在style中定义的其实就是表格的单元格的大小。然后在body中，制作表格肯定少不了table这个标签，每两个...是表格的一行，每两个...是该行的一列，也就是单元格。

制作过程中遇到的问题是怎么合并单元格，也就是图中上下两个相邻的单元格怎么合并成一个，后来发现rowspan 属性规定单元格可横跨的行数，rowspan=2，就可以实现合并两个单元格的效果了。值得注意的是，**在上面一个单元格合并下面一格单元格后，下面一行定义的时候就要少写一个**，不然会出错哦。

其它就没有什么问题可以说的了，毕竟是个新手，暂时搞不出来什么大动作，就这样吧。

如有疑问，欢迎提问。

标签： html css 前端

本文转载自: https://blog.csdn.net/IPhoneP40Pro/article/details/125435747
版权归原作者 IPhoneP40Pro 所有，如有侵权，请联系我们删除。

HTML制作简单课表

这篇文章适合新手使用HTML+CSS制作一张简单美观的学生课表

我是新手代码有点长别在意啊

发表评论

“HTML制作简单课表”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航