这篇文章适合新手使用HTML+CSS制作一张简单美观的学生课表
HTML的 table 元素表示表格数据 , 即通过二维数据表表示的信息。
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，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 表格 应该用于表格数据，这正是 HTML 表格设计出来的用途。在表格中，最小的内容容器是单元格，是通过 <td> 元素创建的 。如果我们想要一行四个单元格，我们需要把这组标签拷贝三次。
本案例避免表格的单调，添加了色彩，使表格更具有丰富性得同时，又突出了表格的重点所在位置，一举两得。
HTML的重要性：
HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如，当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
如有疑问，欢迎提问。
本文含有隐藏内容，请 开通VIP 后查看