HTML和CSS示例（一）——课程表
注：此例子需要用到几个图片：边框.jpg，标题.png，绿色背景.jpg，请把这三个图片文件拷贝到images文件夹中。
图1：边框.jpg
图2：标题.png
图3：绿色背景.jpg
页面源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Erya的课程表</title>
<style>
body {
background: rgb(171, 230, 95);
}
div {
margin: auto;
background: url(images/绿色背景.jpg) no-repeat;
width: 1100px;
height: 530px;
background-size: 100% 100%;
padding: 20px;
//平移
transform: translateX(400px);
transform: translateY(20px);
}
table {
margin: auto;
border-spacing: 10px;
//圆角边框
border-radius: 10px;
border: inset px rgb(53, 161, 20);
/* border:1px solid #99ccff; */
text-align:center;
color: #000;
width: 800px;
height:400px;
transform: translateY(20px);
box-shadow: 1px 3px 10px green;
}
caption {
transform: translateY(-35px);
transform: translateX(290px);
width:240px;
box-shadow: 0px 3px 5px green;
}
th {
/* border:1px inset #99ccff; */
color: #085c05;
width:26px;
height: 30px;
border: outset 2px ;
border-radius: 5px;
}
td {
/* border:1px inset #99ccff; */
color: rgb(53, 161, 20);
font-family: 方正清刻本悦宋简体;
font-weight: bold;
word-wrap:break-word;
background: url(images/边框.jpg);
background-size: 110% 100%;
background-position: -133px 0px;
text-shadow: 1px 1px 1px #fff;
border: inset 2px green;
padding: auto;
margin:auto;
height: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div>
<!--border:指示表格是否用于布局目的，只允许属性值 "" 或 "1"。-->
<table border="1">
<caption>
<img src="images/标题.png">
</caption>
<colgroup span="2">
<colgroup span="5" style="width:160px">
<tr>
<!--
colspan:此单元格可横跨的列数。
rowspan:此单元格可横跨的行数
-->
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th rowspan="2"style="width:80px">上午</th>
<th>第1-2节</th>
<td>Java语言高级编程技术实验</td>
<td></td>
<td>Java语言高级编程技术</td>
<td>数据库原理</td>
<td>概率论与数理统计</td>
</tr>
<tr>
<th>第3-4节</th>
<td></td>
<td>数据结构</td>
<td>计算机组成原理</td>
<td>数据结构</td>
<td>数据库原理</td>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>第5-6节</th>
<td>马克思主义基本原理概论</td>
<td>大学体育</td>
<td></td>
<td></td>
<td>数据结构实验</td>
</tr>
<tr>
<th>第7-8节</th>
<td></td>
<td>概率论与数理统计</td>
<td></td>
<td>创业基础</td>
<td>马克思主义基本原理概论</td>
</tr>
</table>
</div>
</body>
</html>首先看body双标签里的内容（也就是html内容）：
①有一对<div>标签包括了表格，是一个装着所有表格内容的大盒子。
②然后是一个table表格，用于填写课程表里的内容，th定义表格中的表头单元格，td表示单元格。
③表格中的<caption>标题标签：必须直接放置到 <table> 标签之后。每个表格只能规定一个标题。通常标题会居中显示在表格上方。
④表示横跨两列，<th rowspan="2"style="width:80px">表示竖跨两行，且规定了每个单元格的的宽度为80px。
CSS样式部分：
①body表示整个页面，body的背景色设为青绿色。
②div盒子宽高度都比里面装着的table表格大，背景设为images文件包里的“绿色背景.jpg”文件。
③每个单位格td的背景设为images文件包里的“边框.jpg”,并用background-position来调整背景的位置。
④善用transform: translateX()/translateY()来微调元素的位置。
生成的课程表效果如下：
查看18道真题和解析
