实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月22日作业</title>
<style>
table,th,td{
border: 1px solid #333;
}
table{
border-collapse: collapse;
text-align: center;
margin: 50px auto;
width: 60%;
box-shadow: 3px 3px 3px #888;
background-image: url(http://cloud.zhibo1314.com/beijing.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption{
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 30px;
}
th,td{
padding: 10px;
}
td img{
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th{
background-color: rgba(666,666,0,0.3);
}
.php{
color:darkgreen;
font-weight: bolder;
font-size: 1.2em;
}
</style>
</head>
<body>
<table>
<caption>§ 课程表 §</caption>
<tr>
<th rowspan="2">课程表</th>
<th colspan="4">上午</th>
<th colspan="4">下午</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>星期一</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/2.jpg" alt="" width="30">java</td>
<td><img src="http://cloud.zhibo1314.com/3.jpg" alt="" width="30">python</td>
<td><img src="http://cloud.zhibo1314.com/4.jpg" alt="" width="30">javascript</td>
<td><img src="http://cloud.zhibo1314.com/5.jpg" alt="" width="30">C++</td>
<td><img src="http://cloud.zhibo1314.com/6.jpg" alt="" width="30">C#</td>
<td><img src="http://cloud.zhibo1314.com/7.jpg" alt="" width="30">perl</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
</tr>
<tr>
<td>星期二</td>
<td><img src="http://cloud.zhibo1314.com/5.jpg" alt="" width="30">C++</td>
<td><img src="http://cloud.zhibo1314.com/2.jpg" alt="" width="30">java</td>
<td><img src="http://cloud.zhibo1314.com/3.jpg" alt="" width="30">python</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/4.jpg" alt="" width="30">javascript</td>
<td><img src="http://cloud.zhibo1314.com/7.jpg" alt="" width="30">perl</td>
<td><img src="http://cloud.zhibo1314.com/6.jpg" alt="" width="30">C#</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
</tr>
<tr>
<td>星期三</td>
<td><img src="http://cloud.zhibo1314.com/2.jpg" alt="" width="30">java</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/4.jpg" alt="" width="30">javascript</td>
<td><img src="http://cloud.zhibo1314.com/3.jpg" alt="" width="30">python</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/5.jpg" alt="" width="30">C++</td>
<td><img src="http://cloud.zhibo1314.com/7.jpg" alt="" width="30">perl</td>
<td><img src="http://cloud.zhibo1314.com/6.jpg" alt="" width="30">C#</td>
</tr>
<tr>
<td>星期四</td>
<td><img src="http://cloud.zhibo1314.com/3.jpg" alt="" width="30">python</td>
<td><img src="http://cloud.zhibo1314.com/6.jpg" alt="" width="30">C#</td>
<td><img src="http://cloud.zhibo1314.com/2.jpg" alt="" width="30">java</td>
<td><img src="http://cloud.zhibo1314.com/4.jpg" alt="" width="30">javascript</td>
<td><img src="http://cloud.zhibo1314.com/5.jpg" alt="" width="30">C++</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/7.jpg" alt="" width="30">perl</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
</tr>
<tr>
<td>星期五</td>
<td><img src="http://cloud.zhibo1314.com/7.jpg" alt="" width="30">perl</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/5.jpg" alt="" width="30">C++</td>
<td><img src="http://cloud.zhibo1314.com/3.jpg" alt="" width="30">python</td>
<td><img src="http://cloud.zhibo1314.com/6.jpg" alt="" width="30">C#</td>
<td><img src="http://cloud.zhibo1314.com/2.jpg" alt="" width="30">java</td>
<td class="php"><img src="http://cloud.zhibo1314.com/1.jpg" alt="" width="30">php</td>
<td><img src="http://cloud.zhibo1314.com/4.jpg" alt="" width="30">javascript</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
手抄代码：
