一、制作工具
编码工具：记事本2(notepad2)
预览工具 ：chrome 浏览器。
调试方法： 打开notepad2 , 另存为class-table.html。编辑完代码后保存，用浏览器打开class-table.html。如果浏览器已经打开class-table.html，刷新网页就能看到最新效果。
二、表格容器
表格出现在各种办公软件中,如Office Word，Excel, WPS表格等。
如果想要在网页中展示表格，该用什么样的方法实现呢？Html提供了一套完整的表格容器。
- 表格(table)： <table></table>
- 表头(table head)： <thead></thead> 允许省略
- 表行(table row)： <tr></tr>
- 表头单元格(table head data)： <th></th>
- 表体(table body)：<tbody></tbody> 允许省略
- 单元格(table data)： <td></td>，与th功能相同，只是文字没有加粗效果。
注：
1 . ()中的英文注释并非官方解释，只作为方便记忆的英文参考
2 . 容器概念请阅读作者其它文章《任何人都可以做网页！幸运的你，快来试试看！》
请看表格容器的基本结构
<表格>
<表头>
<表行>
<表头单元>列名1</表头单元><表头单元>列名2 </表头单元><表头单元>列名3</表头单元>
</表行>
</表头>
<表体>
<表行>
<单元格>1行1列 </单元格><单元格>1行2列</单元格><单元格>1行3列</单元格>
</表行>
<表行>
<单元格>2行1列 </单元格><单元格> 2行2列</单元格><单元格>2行3列</单元格>
</表行>
<表体>
</表格>
由于以上结构在一些浏览器上表格默认是不显示边线的，所以要给表格添加一个边线属性border="1"，表示边线的宽度为1像素。
翻译成代码：
<table border="1">
<thead>
<tr>
<th>列名1</th><th>列名2 </th><th>列名3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1行1列 </td><td>1行2列</td><td>1行3列</td>
</tr>
<tr>
<td>2行1列 </td><td> 2行2列</td><td>2行3列</td>
</tr>
<tbody>
</table>
由于使用的tr,td等缩写，使得整体代码看起来清爽了许多，现在布置一个小小的作业，请参考以上代码，做一个小小的课程表。
三、合并单元格
有了表格容器的基础知识后，现在谈做一个复杂的课程表还为时尚早。因为课程表不仅有横向单元格合并还有纵向单元格合并，看下面的效果图。
会Excel和WPS表格的同学估计是着急坏了，咋把表格整得这么丑？！！合并单元格多大事，想合并什么单元格，直接选择相应的单元格之后，点合并按钮不就完事了吗？在网页编程中合并单元格还真不是看起来那么简单。
1. 单元格横向合并
例如:
<table border="1">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>
以上是一个2行3列的表格，现在把第1行左边2个单元格合并成1个
<table border="1">
<tr><td colspan="2">11</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>
单元格列跨度属性colspan (column span ): 表示当前的单元格跨了几列。
上面的例子中由于1行1列的单元格跨了2列，导致第1行只允许留下2个单元格，否则表格将变形。
2. 单元格纵向合并
例如:
<table border="1">
<tr><td>11</td><td>12</td></tr>
<tr><td>21</td><td>22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>
以上是1个3行2列的表格，现在把左边1列的所有单元格合并成1个。
<table border="1">
<tr><td rowspan="3">11</td><td>12</td></tr>
<tr><td>22</td></tr>
<tr><td>32</td></tr>
</table>
单元格行跨度属性rowspan (row span ):表示当前的单元格跨了几行。
上面的例子中由于1行1列的单元格跨了3行，导致第2，3行只允许留下1个单元格，否则表格将变形。
经过本小节的学习，相信你已经能做出效果图的样子，虽然丑了点，但是表格的结构已经出来了。
四、美化表格
在美化表格之前，我们先要搞清楚这个课程和最终的效果图差在哪里？然后才能有针对性地进行美化。
1 . 表格边线太丑
2 . 单元格内的文字离边线太近
3 . 文字“上午”和“下午”没有垂直居中
4 . 文字“中午”没有水平居中
5 . 单元格没有背景色
6 . 课程名称没有颜色
问题太多，讲起来没有那么容易，请期待后续的内容，如果大家在制作过程中有任何疑问欢迎留言。
