效果图：
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月22日作业-CSS课程表</title>
<style type="text/css">
div{
width: 480px;
height: 280px;
background-image:url(images/bg/bg01.jpg);
padding:30px;
margin: auto;
}
table,th,td{
border: 1px solid #78041a;
}
table{
margin:30px 10px 10px 70px;
width: 80%;
border-collapse: collapse;
text-align: center;
box-shadow: 3px 3px 3px #666;
background-color: lightgreen;
font-family: "幼圆";
}
td img{
width: 15px;
border-radius: 50%;
box-shadow: 1px 1px 1px #888;
}
th{
background-color: lightpink;
}
.morning{
background-color: lightskyblue;
text-shadow: 1px 1px 1px #888;
}
.afternoon{
background-color: yellow;
text-shadow: 1px 1px 1px #888;
}
caption{
text-shadow: 1px 1px 1px #888;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<caption><h3>2018年下学期课程表</h3></caption>
</tr>
<tr>
<th colspan="2">节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td class="morning" rowspan="4">上午</td>
<td><img src="images/01.jpg"></td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td><img src="images/02.jpg"></td>
<td>语文</td>
<td>数学</td>
<td>化学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td><img src="images/03.jpg"></td>
<td>物理</td>
<td>语文</td>
<td>英语</td>
<td>化学</td>
<td>英语</td>
</tr>
<tr>
<td><img src="images/04.jpg"></td>
<td>英语</td>
<td>物理</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
</tr>
<tr>
<td class="afternoon" rowspan="4">下午</td>
<td><img src="images/05.jpg"></td>
<td>美术</td>
<td>体育</td>
<td>政治</td>
<td>地理</td>
<td>历史</td>
</tr>
<tr>
<td><img src="images/06.jpg"></td>
<td>政治</td>
<td>音乐</td>
<td>自习</td>
<td>体育</td>
<td>班会</td>
</tr>
<tr>
<td><img src="images/07.jpg"></td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td></td>
</tr>
<tr>
<td><img src="images/08.jpg"></td>
<td>自习</td>
<td>自习</td>
<td>体活</td>
<td>自习</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写：
