制作HTML5的表格

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

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

table元素：定义一个表格；

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

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

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

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

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

!DOCTYPEhtmlhtmlheadtitletable001/titlemetacharset="utf-8"//headbodytabletrth节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/td/tr/table/body/html

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

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

对HTML文档进行修改，设置table元素的border值为1，修改后的HTML文档为：

!DOCTYPEhtmlhtmlheadtitletable002/titlemetacharset="utf-8"//headbodytableborder="1"trth节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/td/tr/table/body/html

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

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

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

!DOCTYPEhtmlhtmlheadtitletable003/titlemetacharset="utf-8"//headbodytableborder="1"caption华南师大附中初二（12）班课程表/captiontrth节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/td/tr/table/body/html

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

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

!DOCTYPEhtmlhtmlheadtitletable004/titlemetacharset="utf-8"//headbodytableborder="1"caption华南师大附中初二（12）班课程表/captiontrth上午/下午/thth节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtdrowspan="4"上午/tdtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtdrowspan="3"下午/tdtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/tdtd社团活动/td/tr/table/body/html

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

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

!DOCTYPEhtmlhtmlheadtitletable005/titlemetacharset="utf-8"//headbodytableborder="1"caption华南师大附中初二（12）班课程表/captiontrthcolspan="2"节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtdrowspan="4"上午/tdtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtdrowspan="3"下午/tdtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtdcolspan="5"社团活动/td/tr/table/body/html

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

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

!DOCTYPEhtmlhtmlheadtitletable006/titlemetacharset="utf-8"//headbodytableborder="1"style="width:800px;text-align:center"caption华南师大附中初二（12）班课程表/captiontrthcolspan="2"节次/thth周一/thth周二/thth周三/thth周四/thth周五/th/trtrtdrowspan="4"上午/tdtd第1节课/tdtd语文/tdtd语文/tdtd英语/tdtd英语/tdtd语文/td/trtrtd第2节课/tdtd语文/tdtd数学/tdtd数学/tdtd英语/tdtd数学/td/trtrtd第3节课/tdtd英语/tdtd数学/tdtd物理/tdtd化学/tdtd物理/td/trtrtd第4节课/tdtd英语/tdtd政治/tdtd地理/tdtd物理/tdtd政治/td/trtrtdrowspan="3"下午/tdtd第5节课/tdtd数学/tdtd生物/tdtd信息/tdtd数学/tdtd化学/td/trtrtd第6节课/tdtd体育/tdtd化学/tdtd语文/tdtd语文/tdtd美术/td/trtrtd第7节课/tdtdcolspan="5"社团活动/td/tr/table/body/html

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

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

tbody元素：定义表格主体；

thead元素：定义表格头；

tfoot元素：定义表格脚。

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