您的位置：首页 > Web前端

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

2017-03-09 17:41 211 查看

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

主要利用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标签及相关标签的使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 前端 table
相关文章推荐
新的分享
章节导航