最终效果图

一、制作工具

编码工具：记事本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 . 课程名称没有颜色

问题太多，讲起来没有那么容易，请期待后续的内容，如果大家在制作过程中有任何疑问欢迎留言。