HTML+CSS制作课程表

今天复习到了表格，八表个内容进行了更深层次的了解，首先，来看看我课堂上做好的课程表吧~

这里用到了HTML和CSS，就这两个而已，相比网络上的，这个较为基础，也比较适合初学者运用，
接下来显示一下HTML代码：

 <table><caption>计算机工程技术学院课表</caption><thead><tr><th></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><tr><th rowspan="2">上午</th><td>1-2节<br/>java</td><td>1-2节<br/>Python</td><td>1-2节<br/>HTML5</td><td>1-2节<br/>vue</td><td>1-2节<br/>android</td></tr><tr><td>3-4节<br/>java</td><td>3-4节<br/>Python</td><td>3-4节<br/>HTML5</td><td>3-4节<br/>vue</td><td>3-4节<br/>android</td></tr><tr><th rowspan="2">下午</th><td>5-6节<br/>PHP</td><td>5-6节<br/>javascript</td><td>5-6节<br/>Hadoop</td><td>5-6节<br/>PHOTOSHOP</td><td>5-6节<br/>C</td></tr><tr><td>7-8节<br/>PHP</td><td>7-8节<br/>javascript</td><td>7-8节<br/>Hadoop</td><td>7-8节<br/>PHOTOSHOP</td><td>7-8节<br/>C</td></tr><tr><th rowspan="2">晚上</th><td>9-10节<br/>大学英语</td><td>9-10节<br/>形式政策</td><td>9-10节<br/>创新创业</td><td>9-10节<br/>就业指导</td><td>9-10节<br/>军事理论</td></tr><tr><td>11-12节<br/>大学英语</td><td>11-12节<br/>形式政策</td><td>11-12节<br/>创新创</td><td>11-12节<br/>就业指导</td><td>11-12节<br/>军事理论</td></tr></tbody><tfoot><tr><th>时间说明</th><td colspan="4">8：10-11：50；14：00-17：40；18：10-21：40</td><td></td></tr></tfoot></table>

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);}

这里设置两个空单元格，颜色一样是采用渐变。
这个课程表要注意单元格之间的合并，这一步非常重要，代码在上面。写代码过程中有点繁琐，但是作为一个合格的码农，要有足够的耐心。
写完突然发现有点简单，但课上可是花了挺长时间早的，希望敲代码速度越来越快吧~

HTML+CSS制作课程表相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页产品介绍服 ...
html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
html中多边形图形怎么制作,CSS制作图形速查表
前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下 ...
计算机word做课程表实验报告,word制作课程表.doc
word制作课程表word制作课程表 Word表格操作起来简单容易上手,不像Excel功能一大堆但非专业人士并不会用它制作表格.有些表格数据需要用Excel来完成,但是有些简单基本的表格我们只需要用W ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
小学计算机课程表说课稿,小学信息技术《制作课程表》说课稿.doc
PAGE 2 小学信息技术<制作课程表>说课稿一.教学目标根据对教材内容的分析和我校学生的实际情况,我将本课的教学目标确定如下: 知识与技能: 1.了解行.列.单元格的概念. 2.掌握在 ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
项目七项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程项目简介: 通过上一章节的学习,我们了 ...

HTML+CSS制作课程表

HTML+CSS制作课程表

HTML+CSS制作课程表相关推荐

最新文章

热门文章