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

本篇文章讲解的是使用html中的表格table来制作课程表完成图如下：1.html的代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-wi...

橙程橙

8702人浏览 · 2019-07-18 15:34:41

橙程橙 · 2019-07-18 15:34:41 发布

本篇文章讲解的是使用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;
    }

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

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

35岁程序员危机：科技行业快速变化，如何应对年轻竞争者的挑战？

2048 AI社区

手写 Tomcat

使用 Socket 简单实现ResponseHttpServer03 动态 Response : 按照规范构造返回流04 各司其职的 Server : 拆分响应模块与处理模块#mermaid-svg-2INa1N7vV9JzTK1K {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mer