最终效果图

一、制作工具

编码工具：记事本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列

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

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

三、合并单元格

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

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

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

1. 单元格横向合并

例如:


   11 12 13
   11 12 13


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


   11 13
    11 12 13

单元格列跨度属性colspan (column span ): 表示当前的单元格跨了几列。
上面的例子中由于1行1列的单元格跨了2列，导致第1行只允许留下2个单元格，否则表格将变形。

2. 单元格纵向合并

例如:


    11 12
    21 22
    31 32

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

    11 12
    22
    32

单元格行跨度属性rowspan (row span ):表示当前的单元格跨了几行。
上面的例子中由于1行1列的单元格跨了3行，导致第2，3行只允许留下1个单元格，否则表格将变形。

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

四、美化表格

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

1 . 表格边线太丑
2 . 单元格内的文字离边线太近
3 . 文字“上午”和“下午”没有垂直居中
4 . 文字“中午”没有水平居中
5 . 单元格没有背景色
6 . 课程名称没有颜色

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

怎么用记事本做一个漂亮的网页课程表(1)？