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>
<style>
/* 去除单元格间距 */
table{border-spacing: 0; text-align: center; font-size: 28px}
td{
width: 130px;
height: 40px;
border: 1px solid black
}
#h1{text-align: center; background-color: #6ebf3f}
.head{background-color: #ed7ab1; text-align: left}
.week{background-color: #7fcdcd}
.am{background-color: #9a61a8}
.wx{background-color: #6ebf3f}
.pm{background-color: #f69da1}
</style>
</head>
<body>
<h1 id="h1" >课 程 表</h1>
<form action="">
<table border="1px" align="center">
<tr class="head">
<td colspan="3">             姓 名 : </td>
<td colspan="3">             班 级 : </td>
</tr>
<tr class="week">
<td>星 期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td class="am" rowspan="4">上 <br> <br> 午</td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wx" colspan="6">午              
              休</td>
</tr>
<tr>
<td class="pm" rowspan="3">下 <br> <br> 午</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>