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

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

完成图如下：

1.html的代码如下：

    
    
    
    
  


    

        
学生课表
    
    

        

            学期
            
                2019-2020第一学期
                2019-2020第二学期
                2018-2019第一学期
                2018-2019第二学期
            
        
        

            

            

                
节次
                
星期一
                
星期二
                
星期三
                
星期四
                
星期五
                
星期六
                
星期日
            
            

                
1-2
                
高等数学
                
大学英语
                
软件工程
                
Java程序设计
                
PHP开发实践
                
微信小程序
                
移动App
            
            

                
3-4
                
H5+CSS3
                
JavaScript
                
Jquery
                
Ajax
                
Canvas
                
Vue
                
Axios
            
            

                
5-6
                
Vue全家桶实战
                
Node
                
express框架开发
                
koa框架
                
webpack
                
React
                
JSX
            
            

                
7-8
                
React全家桶
                
Angular
                
Python
                
BUI框架
                
git
                
Linux
                
VueX
            
            

                
9-10
                
vue-router
                
vue-loader
                
vue-cli脚手架
                
vue-SSR服务端渲染
                
vue生命周期
                
vue-指令系统
                
vue-组件通信
            
            

                
11-12
                
vue-动画
                
vue-插槽
                
vue-路由传参
                
vue-命名视图
                
vue-watch监听
                
vue-render渲染
                
vue-设计模式MVVM
            
            
        
    

不要忘记导入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;
    }

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