用HTML实现课程表

来源：互联网发布：什么软件有烟雾编辑：程序博客网时间：2024/06/05 08:50

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>课程表</title>    <link rel="stylesheet" type="text/css" href="schedule2.css"></head><body>    <table class="schedule" border="1" bordercolor="#ccc" cellspacing="0">        <caption>课程表</caption>        <tr>            <th>项目</th>            <th colspan="5">上课</th>            <th colspan="2">休息</th>        </tr>        <tr>            <th class="col-a">星期</th>            <th class="col-b">星期一</th>            <th class="col-b">星期二</th>            <th class="col-b">星期三</th>            <th class="col-b">星期四</th>            <th class="col-b">星期五</th>            <th class="col-b">星期六</th>            <th class="col-b">星期天</th>        </tr>        <tr>            <td class="td-head" rowspan="4">上午</td>            <td>PHP</td>            <td>HTML</td>            <td>CSS</td>            <td>JavaScript</td>            <td>iOS</td>            <td rowspan="4" colspan="2">休息</td>        </tr>        <tr>            <td>iOS</td>            <td>PHP</td>            <td>HTML</td>            <td>CSS</td>            <td>JavaScript</td>        </tr>        <tr>            <td>JavaScript</td>            <td>iOS</td>            <td>PHP</td>            <td>HTML</td>            <td>CSS</td>        </tr>        <tr>            <td>CSS</td>            <td>JavaScript</td>            <td>iOS</td>            <td>PHP</td>            <td>HTML</td>        </tr>        <tr>            <td class="td-head" rowspan="2">下午</td>            <td>HTML</td>            <td>CSS</td>            <td>JavaScript</td>            <td>iOS</td>            <td>PHP</td>            <td rowspan="2" colspan="2">休息</td>        </tr>        <tr>            <td>HTML</td>            <td>CSS</td>            <td>PHP</td>            <td>JavaScript</td>            <td>iOS</td>        </tr>    </table></body></html>

css文件

*{    margin: 0;    padding: 0;}th{    background-color: blanchedalmond;}td{    background-color: aliceblue;}.schedule{    width: 740px;    margin: 0 auto;    margin-top: 30px;}.col-a{    width: 40px;}.col-b{    width: 100px;}.td-head{    text-align: center;}

0 0