北京中科专注治疗白癜风 http://www.pfzhiliao.com/成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。thead、tbody、tfoot标签thead标签定义表头。tbody标签定义表格的核心内容。tfoot标签定义表脚，通常是汇总行。就像一个网页会有页头、核心内容区域、页脚几部分组成，一个表格，也可以分为表头、核心内容、表脚三大组成部分。那么，对于一个表格，我们就可以这样去构造它：最外面是代表整个表格的table标签。一个表格里面有表头、表身(核心内容)、表脚三部分。所以table标签里面分别是代表表头、核心内容、表脚的thead、tbody、tfoot标签。表头、表身、表脚里面会有各自的行。所以thead、tbody、tfoot标签里面，又是代表行的tr标签。每一行当中是各自的单元格。所以tr标签里面是代表单元格的td或者th标签。接下来我创建一个表格其他特性.html的网页，在里面写演示代码。比如我要创建一个关于一年当中四个季度，农产品、水产品、工业品的进出口额的统计数据的表格。我先写好表格的主要结构，以及表头：tableborder=1width=theadtrthcolspan=2第一季度/ththcolspan=2第二季度/ththcolspan=2第三季度/ththcolspan=2第四季度/th/trtrth进口/thth出口/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/th/tr/theadtbody/tbodytfoot/tfoot/table在浏览器中效果如下：表头里面有两行，第一行是第一季度、第二季度、第三季度、第四季度。每一个季度又分为进口和出口的数据。这个表头里面的单元格内容都具有标题意义，所以单元格用了th标签。我要让每一个季度都占2个单元格的宽度，这样就能让每一个季度的小格，跟下面的进口和出口两个小格对齐，所以在第一行每一个季度的th标签上写上跨两列的属性--colspan=2。接下来我加上表身，当然数据我随便写的：tableborder=1width=!--表头--theadtrthcolspan=2第一季度/ththcolspan=2第二季度/ththcolspan=2第三季度/ththcolspan=2第四季度/th/trtrth进口/thth出口/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/th/tr/thead!--表身，或者说表格的核心内容--tbodytrth农产品/thtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd99/td/trtrth水产品/thtd76/tdtd83/tdtd79/tdtd85/tdtd74/tdtd81/tdtd69/tdtd77/td/trtrth工业品/thtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr/tbody!--表脚--tfoot/tfoot/table在浏览器中效果如下：农产品、水产品、工业品相当于也是一个小标题，为了有字体加粗的效果，所以我用th标签，当然你用td也行。我们说了，th和td是同一个级别的，所以th也是可以写在tbody中的，并不是说th具有标题意义，就只能写在表头中。但是我们看到表身的农产品、水产品、工业品这三行跟表头错开了，数据没有跟进口和出口对上。实际上只是错开了一个单元格的位置，那么我在表头的每一行，最前面都加上一个空的单元格，占一个位置，不就跟下面表身对齐了吗？我只贴出来表头改动的代码：theadtrth/ththcolspan=2第一季度/ththcolspan=2第二季度/ththcolspan=2第三季度/ththcolspan=2第四季度/th/trtrth/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/th/tr/thead在浏览器中效果如下：接下来我再写表脚。表脚一般是用来汇总数据的。比如每一个季度，农产品、水产品、工业品总共进口了多少，可以汇总到表脚部分。那么加上表脚，所有的代码如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title表格其他特性/titlestyletable,tr,td,th,thead,tbody,tfoot{border-collapse:collapse;}/style/headbodytableborder=1width=!--表头--theadtrth/ththcolspan=2第一季度/ththcolspan=2第二季度/ththcolspan=2第三季度/ththcolspan=2第四季度/th/trtrth/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/thth进口/thth出口/th/tr/thead!--表身，或者说表格的核心内容--tbodytrth农产品/thtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd99/td/trtrth水产品/thtd76/tdtd83/tdtd79/tdtd85/tdtd74/tdtd81/tdtd69/tdtd77/td/trtrth工业品/thtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr/tbody!--表脚--tfoottrth汇总/thtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr/tfoot/table/body/html在浏览器中效果如下：cellspacing和cellpadding属性cellspacing属性(使用百分比或像素)定义了两个单元格之间空间的大小。cellpadding属性定义了单元格中的内容和边框之间空间的大小。注意：cellspacing和cellpadding这两个属性在HTML5中都已经废弃，都是采用css代码来实现这两个属性的效果。那为什么在这里还要提它们呢？因为虽然它们已经被废弃了，但是还是能用的，用它们的话，还是能够生效的，如果在实际开发中，你想用它们，也没有问题。感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以
转载请注明：http://www.aierlanlan.com/tzrz/7718.html
