前端进阶------开发课程表------

来源：互联网发布：mac怎么打开7z 编辑：程序博客网时间：2024/06/07 10:05

前端进阶——开发课程表——

主要利用HTML&HTML5标签及表格table等知识开发课程表。
相关要点：
1、HTML&HTML5标签及表格table的使用；
2、代码结构的处理
3、HTML5语义的使用
4、使用了css进行美化。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>课程表</title>    <!-- S  CSS -->    <style>    * {        padding: 0;        margin: 0;    }    table {        border: 1px solid #3bafda;        margin: 100px auto;        text-align: center;        border-collapse: collapse;    }    table th {        border: 1px solid #3bafda;        padding: 10px;    }    table td {        border: 1px solid #48cfad;        padding: 4px 10px;    }    </style>    <!-- E  CSS --></head><body>    <!-- S   课程表 -->    <table>        <caption>课程表</caption>        <thead>            <tr>                <th colspan="2">时间</th>                <th>星期一</th>                <th>星期二</th>                <th>星期三</th>                <th>星期四</th>                <th>星期五</th>                <th>星期六</th>                <th>星期天</th>            </tr>        </thead>        <tbody>            <tr>                <td rowspan="4">上午</td>                <td>1</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td rowspan="4">户外活动</td>                <td rowspan="8">休息</td>            </tr>            <tr>            <td>2</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>            </tr>            <tr>            <td>3</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>            </tr>            <tr>            <td>4</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>            </tr>            <tr>            <td>中午</td>            <td colspan="7">午休</td>            </tr>            <tr>                <td rowspan="3">下午</td>                <td>1</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td rowspan="3">拓展训练</td>            </tr>            <tr>            <td>2</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>            </tr>            <tr>            <td>3</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>                <td>数学</td>            </tr>        </tbody>    </table>    <!-- S   课程表 --></body></html>

实现效果如下：

总结：此次练习是一个十分基础的table标签及相关标签的使用。

0 0