h5表单制作教程（免费的h5制作网站）
使用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文档，制定了一个学生常用的课表：
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table001&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table&> &<tr&> &<th&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开这个文档时，效果如下：
这个表格一点都不好看，因为没有表格线。
3、给&<table&>元素设置border属性的值，为表格加上表格线。
对HTML文档进行修改，设置&<table&>元素的border值为1，修改后的HTML文档为：
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table002&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table border="1"&> &<tr&> &<th&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开这个文档，效果如下：
现在的表格好看一些了，但是还有个缺点，就是没有标题。
4、添加&<caption&>元素，为表格添加标题
这里修改HTML文档，加上“华南师大附中初二（12）班课程表”标题，修改后的HTML文档如下；
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table003&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table border="1"&> &<caption&>华南师大附中初二（12）班课程表&</caption&> &<tr&> &<th&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开这个文档，效果如下：
5、现在我们加上“上午、下午”的信息。
为加上“上午、下午”的信息，我们需要增加一列，并使用&<td&>元素的rowspan属性对行进行合并。修改后的HTML文档如下：
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table004&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table border="1"&> &<caption&>华南师大附中初二（12）班课程表&</caption&> &<tr&> &<th&>上午/下午&</th&> &<th&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td rowspan="4"&>上午&</td&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td rowspan="3"&>下午&</td&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &<td&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开该HTML文件，效果如下：
6、为了让课表更美观，我们将“上午/下午”和节次合并，将“社团活动”合并。
我们通过设置&<td&>元素的colspan属性，实现这个目标。修改后的HTML文档如下：
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table005&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table border="1"&> &<caption&>华南师大附中初二（12）班课程表&</caption&> &<tr&> &<th colspan="2"&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td rowspan="4"&>上午&</td&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td rowspan="3"&>下午&</td&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td colspan="5"&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开该文件，效果如下：
7、现在表格内容基本上完整了，就是显得有点小。
修改一下HTML文档，添加一下列宽的信息，修改后的HTML文档如下：
&<!DOCTYPE html&>&<html&> &<head&> &<title&>table006&</title&> &<meta charset="utf-8" /&> &</head&> &<body&> &<table border="1"&> &<caption&>华南师大附中初二（12）班课程表&</caption&> &<tr&> &<th colspan="2"&>节次&</th&> &<th&>周一&</th&> &<th&>周二&</th&> &<th&>周三&</th&> &<th&>周四&</th&> &<th&>周五&</th&> &</tr&> &<tr&> &<td rowspan="4"&>上午&</td&> &<td&>第1节课&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>英语&</td&> &<td&>英语&</td&> &<td&>语文&</td&> &</tr&> &<tr&> &<td&>第2节课&</td&> &<td&>语文&</td&> &<td&>数学&</td&> &<td&>数学&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &</tr&> &<tr&> &<td&>第3节课&</td&> &<td&>英语&</td&> &<td&>数学&</td&> &<td&>物理&</td&> &<td&>化学&</td&> &<td&>物理&</td&> &</tr&> &<tr&> &<td&>第4节课&</td&> &<td&>英语&</td&> &<td&>政治&</td&> &<td&>地理&</td&> &<td&>物理&</td&> &<td&>政治&</td&> &</tr&> &<tr&> &<td rowspan="3"&>下午&</td&> &<td&>第5节课&</td&> &<td&>数学&</td&> &<td&>生物&</td&> &<td&>信息&</td&> &<td&>数学&</td&> &<td&>化学&</td&> &</tr&> &<tr&> &<td&>第6节课&</td&> &<td&>体育&</td&> &<td&>化学&</td&> &<td&>语文&</td&> &<td&>语文&</td&> &<td&>美术&</td&> &</tr&> &<tr&> &<td&>第7节课&</td&> &<td colspan="5"&>社团活动&</td&> &</tr&> &</table&> &</body&>&</html&>使用浏览器打开这个文件，效果如下：
其实，在HTML5中，除了上面五个主要元素，还有三个较常用的的元素：
tbody元素：定义表格主体；
thead元素：定义表格头；
tfoot元素：定义表格脚。
这三个元素主要用于将表格分为表头、表尾、表体三个部分，便于进行编程控制，使用起来非常简单，这里就不介绍了。