最终效果图

一、制作工具

编码工具：记事本2(notepad2)

预览工具 ：chrome 浏览器。

调试方法： 打开notepad2 , 另存为class-table.html。编辑完代码后保存，用浏览器打开class-table.html。如果浏览器已经打开class-table.html，刷新网页就能看到最新效果。

二、表格容器

表格出现在各种办公软件中,如Office Word，Excel, WPS表格等。

如果想要在网页中展示表格，该用什么样的方法实现呢？Html提供了一套完整的表格容器。

表格(table)：

表头(table head)： 允许省略

表行(table row)：

表头单元格(table head data)：

表体(table body)：

允许省略

单元格(table data)：

，与th功能相同，只是文字没有加粗效果。

注：

1 . ()中的英文注释并非官方解释，只作为方便记忆的英文参考

2 . 容器概念请阅读作者其它文章《任何人都可以做网页！幸运的你，快来试试看！》

请看表格容器的基本结构

列名1表头单元>列名2 表头单元>列名3表头单元>

表行>

表头>

1行1列 单元格>1行2列单元格>1行3列单元格>

表行>

2行1列 单元格> 2行2列单元格>2行3列单元格>

表行>

表格>

由于以上结构在一些浏览器上表格默认是不显示边线的，所以要给表格添加一个边线属性border="1"，表示边线的宽度为1像素。

翻译成代码：

列名1列名2 列名3

1行1列 1行2列1行3列2行1列 2行2列2行3列

由于使用的tr,td等缩写，使得整体代码看起来清爽了许多，现在布置一个小小的作业，请参考以上代码，做一个小小的课程表。

三、合并单元格

有了表格容器的基础知识后，现在谈做一个复杂的课程表还为时尚早。因为课程表不仅有横向单元格合并还有纵向单元格合并，看下面的效果图。

不要嫌我丑，做出来算你赢

会Excel和WPS表格的同学估计是着急坏了，咋把表格整得这么丑？！！合并单元格多大事，想合并什么单元格，直接选择相应的单元格之后，点合并按钮不就完事了吗？在网页编程中合并单元格还真不是看起来那么简单。

1. 单元格横向合并

例如:

以上是一个2行3列的表格，现在把第1行左边2个单元格合并成1个

单元格列跨度属性colspan (column span ): 表示当前的单元格跨了几列。

上面的例子中由于1行1列的单元格跨了2列，导致第1行只允许留下2个单元格，否则表格将变形。

2. 单元格纵向合并

例如:

以上是1个3行2列的表格，现在把左边1列的所有单元格合并成1个。

单元格行跨度属性rowspan (row span ):表示当前的单元格跨了几行。

上面的例子中由于1行1列的单元格跨了3行，导致第2，3行只允许留下1个单元格，否则表格将变形。

经过本小节的学习，相信你已经能做出效果图的样子，虽然丑了点，但是表格的结构已经出来了。

四、美化表格

在美化表格之前，我们先要搞清楚这个课程和最终的效果图差在哪里？然后才能有针对性地进行美化。

1 . 表格边线太丑

2 . 单元格内的文字离边线太近

3 . 文字“上午”和“下午”没有垂直居中

4 . 文字“中午”没有水平居中

5 . 单元格没有背景色

6 . 课程名称没有颜色

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