使用HTML5制作表格，是特别容易的事情，下面介绍一下制作方法。

1、HTML5表格的主要元素：

HTML5的表格包括table、caption、tr、td、th五个主要元素：

table元素：定义一个表格；

caption元素：定义表格的标题；

tr元素：定义表格的一行，tr是table row的缩写；

td元素：定义表格单元，td是table data的缩写；

th元素：定义表头，th是table head的缩写。

2、制作一个简单的表格

下面这个HTML文档，制定了一个学生常用的课表：

节次
周一
周二
周三
周四
周五


第1节课
语文
语文
英语
英语
语文


第2节课
语文
数学
数学
英语
数学


第3节课
英语
数学
物理
化学
物理


第4节课
英语
政治
地理
物理
政治


第5节课
数学
生物
信息
数学
化学


第6节课
体育
化学
语文
语文
美术


第7节课
社团活动
社团活动
社团活动
社团活动
社团活动

使用浏览器打开这个文档时，效果如下：

这个表格一点都不好看，因为没有表格线。

3、给元素设置border属性的值，为表格加上表格线。

对HTML文档进行修改，设置

元素的border值为1，修改后的HTML文档为：

节次	周一	周二	周三	周四	周五
第1节课	语文	语文	英语	英语	语文
第2节课	语文	数学	数学	英语	数学
第3节课	英语	数学	物理	化学	物理
第4节课	英语	政治	地理	物理	政治
第5节课	数学	生物	信息	数学	化学
第6节课	体育	化学	语文	语文	美术
第7节课	社团活动	社团活动	社团活动	社团活动	社团活动

使用浏览器打开这个文档，效果如下：

现在的表格好看一些了，但是还有个缺点，就是没有标题。

4、添加元素，为表格添加标题

这里修改HTML文档，加上“华南师大附中初二（12）班课程表”标题，修改后的HTML文档如下：

华南师大附中初二（12）班课程表

节次
周一
周二
周三
周四
周五


第1节课
语文
语文
英语
英语
语文


第2节课
语文
数学
数学
英语
数学


第3节课
英语
数学
物理
化学
物理


第4节课
英语
政治
地理
物理
政治


第5节课
数学
生物
信息
数学
化学


第6节课
体育
化学
语文
语文
美术


第7节课
社团活动
社团活动
社团活动
社团活动
社团活动

使用浏览器打开这个文档，效果如下：

5、现在我们加上“上午、下午”的信息。

为加上“上午、下午”的信息，我们需要增加一列，并使用元素的rowspan属性对行进行合并。修改后的HTML文档如下：

华南师大附中初二（12）班课程表

上午/下午
节次
周一
周二
周三
周四
周五


上午
第1节课
语文
语文
英语
英语
语文


第2节课
语文
数学
数学
英语
数学


第3节课
英语
数学
物理
化学
物理


第4节课
英语
政治
地理
物理
政治


下午
第5节课
数学
生物
信息
数学
化学


第6节课
体育
化学
语文
语文
美术


第7节课
社团活动
社团活动
社团活动
社团活动
社团活动

使用浏览器打开该HTML文件，效果如下：

6、为了让课表更美观，我们将“上午/下午”和节次合并，将“社团活动”合并。

我们通过设置元素的colspan属性，实现这个目标。修改后的HTML文档如下：

华南师大附中初二（12）班课程表

节次
周一
周二
周三
周四
周五


上午
第1节课
语文
语文
英语
英语
语文


第2节课
语文
数学
数学
英语
数学


第3节课
英语
数学
物理
化学
物理


第4节课
英语
政治
地理
物理
政治


下午
第5节课
数学
生物
信息
数学
化学


第6节课
体育
化学
语文
语文
美术


第7节课
社团活动

使用浏览器打开该文件，效果如下：

7、现在表格内容基本上完整了，就是显得有点小。

修改一下HTML文档，添加一下列宽的信息，修改后的HTML文档如下：

华南师大附中初二（12）班课程表

节次
周一
周二
周三
周四
周五


上午
第1节课
语文
语文
英语
英语
语文


第2节课
语文
数学
数学
英语
数学


第3节课
英语
数学
物理
化学
物理


第4节课
英语
政治
地理
物理
政治


下午
第5节课
数学
生物
信息
数学
化学


第6节课
体育
化学
语文
语文
美术


第7节课
社团活动

使用浏览器打开这个文件，效果如下：

其实，在HTML5中，除了上面五个主要元素，还有三个较常用的的元素：

tbody元素：定义表格主体；

thead元素：定义表格头；

tfoot元素：定义表格脚。

这三个元素主要用于将表格分为表头、表尾、表体三个部分，便于进行编程控制，使用起来非常简单，这里就不介绍了。