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()来微调元素的位置。

生成的课程表效果如下：
图片说明