html，css使用表格制作课程表

本篇文章讲解的是使用html中的表格table来制作课程表

完成图如下：

1.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>课表制作</title></head>
<body><header><h2>学生课表</h2></header><div class="container"><div class="xueqi_head"><button type="button" class="xueqi_btn">学期</button><select class="xueqi_sel"><option value="">2019-2020第一学期</option><option value="">2019-2020第二学期</option><option value="">2018-2019第一学期</option><option value="">2018-2019第二学期</option></select></div><table cellspacing="0" align="center" width="100%" cellpadding="8px"><tbody><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr><td>1-2</td><td>高等数学</td><td>大学英语</td><td>软件工程</td><td>Java程序设计</td><td>PHP开发实践</td><td>微信小程序</td><td>移动App</td></tr><tr><td>3-4</td><td>H5+CSS3</td><td>JavaScript</td><td>Jquery</td><td>Ajax</td><td>Canvas</td><td>Vue</td><td>Axios</td></tr><tr><td>5-6</td><td>Vue全家桶实战</td><td>Node</td><td>express框架开发</td><td>koa框架</td><td>webpack</td><td>React</td><td>JSX</td></tr><tr><td>7-8</td><td>React全家桶</td><td>Angular</td><td>Python</td><td>BUI框架</td><td>git</td><td>Linux</td><td>VueX</td></tr><tr><td>9-10</td><td>vue-router</td><td>vue-loader</td><td>vue-cli脚手架</td><td>vue-SSR服务端渲染</td><td>vue生命周期</td><td>vue-指令系统</td><td>vue-组件通信</td></tr><tr><td>11-12</td><td>vue-动画</td><td>vue-插槽</td><td>vue-路由传参</td><td>vue-命名视图</td><td>vue-watch监听</td><td>vue-render渲染</td><td>vue-设计模式MVVM</td></tr></tbody></table></div>
</body>
</html>

不要忘记导入css样式表哦！

2.css样式，代码如下：

body{margin:0;}header{margin:30px auto;text-align: center;}.container{width:80%;margin:0 auto;}.xueqi_head{margin: 30px 0 10px;}.xueqi_btn{width: 80px;padding: 6px;float: left;background-color: cornflowerblue;border: none;color: #fff;}.xueqi_sel{width:180px;padding:5px}tr,td{border:1px solid #ccc;text-align: center;}th{color:#fff;}td{font-size:12px;padding:10px}tr>th:nth-child(1){background-color: #69A4E0;border-color:#69A4E0;}tr>th:nth-child(2){background-color: #3CC051;border-color:#3CC051;}tr>th:nth-child(3){background-color: #ED4E2A;border-color:#ED4E2A;}tr>th:nth-child(4){background-color: #57B5E3;border-color:#57B5E3;}tr>th:nth-child(5){background-color: #FCB322;border-color:#FCB322;}tr>th:nth-child(6){background-color: #4ad8e4;border-color:#4ad8e4;}tr>th:nth-child(7){background-color: #852B99;border-color:#852B99;}tr>th:nth-child(8){background-color: #999;border-color:#999;}

以上就是全部内容啦，谢谢阅览，希望对你有所帮助~

html，css使用表格制作课程表相关推荐

CSS控制表格——制作日历
表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格.一.表格中的标记表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据 ...
怎么使用php制作课程表,利用WPS表格制作课程表全攻略
在文档中插入表格或者用文字工具制作表格都是我们在工作中经常遇到的问题.如果表格的格式稍微复杂一些,为了调整表格的各项格式,我们将不得不在各个菜单和对话框中切换,使得工作量大大增加.但在WPS Offi ...
用php做出课程表,使用表格制作课程表
摘要: &表格标签table * { margin: 0px; padding: 0px; } table { border: 1px solid #ccc; border-collapse: ...
计算机word做课程表实验报告,word制作课程表.doc
word制作课程表word制作课程表 Word表格操作起来简单容易上手,不像Excel功能一大堆但非专业人士并不会用它制作表格.有些表格数据需要用Excel来完成,但是有些简单基本的表格我们只需要用W ...
小学计算机课程表说课稿,小学信息技术《制作课程表》说课稿.doc
PAGE 2 小学信息技术<制作课程表>说课稿一.教学目标根据对教材内容的分析和我校学生的实际情况,我将本课的教学目标确定如下: 知识与技能: 1.了解行.列.单元格的概念. 2.掌握在 ...
html表格制作应该注意什么软件,html表格制作
一.简单表格制作举个例子来说,如果今天我们要做一个3栏2列的表格,在WORD中,只要设定表格为3栏.2列就完成了,不过,在网页中做一个3栏2列的表格,可是要分成好几个步骤的: 第一个步骤,利用标签 ...
CSS定义表格边框大全(细线/虚线/点线)
定义表格边框全部为1 边框颜色 #C7C7C7 .tb1{ border:1px solid #C7C7C7;} 定义表格边框左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7 .td2 ...
android课程表设计报告,制作课程表教案设计
制作课程表教案设计我的课程表 [教学目标] 1.了解表格.行.列.单元格的概念,区分行与列. 2.学会制作简单的课程表. 3.激发学生的求知欲,培养创新意识. [教学重点.难点] 1.重点:插入表格 ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
计算机表格公开课,Word表格制作教案公开课
<Word表格制作教案公开课>由会员分享,可在线阅读,更多相关<Word表格制作教案公开课(4页珍藏版)>请在人人文库网上搜索. 1.2012年乐至县教研课教案科目:计算机应 ...

html，css使用表格制作课程表

本篇文章讲解的是使用html中的表格table来制作课程表

html，css使用表格制作课程表相关推荐

最新文章

热门文章