HTML+CSS制作课程表
HTML+CSS制作课程表
今天复习到了表格，八表个内容进行了更深层次的了解，首先，来看看我课堂上做好的课程表吧~
这里用到了HTML和CSS，就这两个而已，相比网络上的，这个较为基础，也比较适合初学者运用，
接下来显示一下HTML代码：
计算机工程技术学院课表
周一
周二
周三
周四
周五
"2">上午
1-2节
java
1-2节
Python
1-2节
HTML5
1-2节
vue
1-2节
android
3-4节
java
3-4节
Python
3-4节
HTML5
3-4节
vue
3-4节
android
"2">下午
5-6节
PHP
5-6节
javascript
5-6节
Hadoop
5-6节
PHOTOSHOP
5-6节
C
7-8节
PHP
7-8节
javascript
7-8节
Hadoop
7-8节
PHOTOSHOP
7-8节
C
"2">晚上
9-10节
大学英语
9-10节
形式政策
9-10节
创新创业
9-10节
就业指导
9-10节
军事理论
11-12节
大学英语
11-12节
形式政策
11-12节
创新创
11-12节
就业指导
11-12节
军事理论
时间说明
"4">8：10-11：50；14：00-17：40；18：10-21：40
table表示创建了一个表格；th表示表头，它会有自己与td区分的样式，如字体加粗，颜色加深；tr表示行，td表示列。thead表示表格的头部；tfoot表示表格的尾部；tbody表示除thead和tfoot外的表格内容；一般，thead、tbody、tfoot用于分组。
上午 rowspan="2"表示这个单元格占了两行的意思； 8：10-11：50；14：00-17：40；18：10-21：40 colspan="4"这里表示这个单元格占了这一行的四列；接下来是css部分：
table {
width: 600px;
height: 350px;
border: 1px dashed rgb(252, 255, 252);
border-collapse: collapse;
}
这一部分用于设置表格的宽度、高度边框以及合并单元格内的边框；
td,
th {
border: 1px solid rgb(252, 255, 252);
}
td、th的边框颜色，大小，边框样式；
td {
background: linear-gradient(to left, rgb(159, 216, 159), rgb(109, 196, 101));
text-align: center;
text-shadow: 1px 1px 1px rgb(105, 153, 32);
}
每个单元格的颜色，设置了渐变颜色，文字对齐方式以及文字阴影；我一般喜欢居中对齐；
th {
background: linear-gradient(to left, rgb(61, 150, 61), rgb(69, 201, 69))
}
设置表头的背景颜色，也是渐变；
thead th:nth-child(1) {
background: rgb(149, 253, 166);
}
tfoot td:nth-last-child(1) {
background: rgb(149, 253, 166);
}
这里设置两个空单元格，颜色一样是采用渐变。
这个课程表要注意单元格之间的合并，这一步非常重要，代码在上面。写代码过程中有点繁琐，但是作为一个合格的码农，要有足够的耐心。
写完突然发现有点简单，但课上可是花了挺长时间早的，希望敲代码速度越来越快吧~