html5表格两列合并_29 HTML中表格的其他特性

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

、、标签

标签定义表头。

标签定义表格的核心内容。标签定义表脚，通常是汇总行。

就像一个网页会有页头、核心内容区域、页脚几部分组成，一个表格，也可以分为表头、核心内容、表脚三大组成部分。

那么，对于一个表格，我们就可以这样去构造它：

最外面是代表整个表格的

标签。

一个表格里面有表头、表身(核心内容)、表脚三部分。

所以

标签里面分别是代表表头、核心内容、表脚的、、标签。

表头、表身、表脚里面会有各自的行。

所以、

、标签里面，又是代表行的标签。

每一行当中是各自的单元格。

所以

标签里面是代表单元格的或者标签。

接下来我创建一个"表格其他特性.html"的网页，在里面写演示代码。

比如我要创建一个关于一年当中四个季度，农产品、水产品、工业品的进出口额的统计数据的表格。

我先写好表格的主要结构，以及表头：

第一季度 第二季度 第三季度 第四季度 进口 出口 进口 出口 进口 出口 进口 出口

在浏览器中效果如下：

表头里面有两行，第一行是第一季度、第二季度、第三季度、第四季度。

每一个季度又分为进口和出口的数据。

这个表头里面的单元格内容都具有标题意义，所以单元格用了th标签。

我要让每一个季度都占2个单元格的宽度，这样就能让每一个季度的小格，跟下面的进口和出口两个小格对齐，所以在第一行每一个季度的th标签上写上跨两列的属性--colspan="2"。

接下来我加上表身，当然数据我随便写的：

第一季度 第二季度 第三季度 第四季度 进口 出口 进口 出口 进口 出口 进口 出口 农产品 100 102 104 106 105 103 101 99 水产品 76 83 79 85 74 81 69 77 工业品 200 202 204 206 205 203 201 199

在浏览器中效果如下：

农产品、水产品、工业品相当于也是一个小标题，为了有字体加粗的效果，所以我用th标签，当然你用td也行。

我们说了，th和td是同一个级别的，所以th也是可以写在tbody中的，并不是说th具有标题意义，就只能写在表头中。

但是我们看到表身的农产品、水产品、工业品这三行跟表头错开了，数据没有跟进口和出口对上。

实际上只是错开了一个单元格的位置，那么我在表头的每一行，最前面都加上一个空的单元格，占一个位置，不就跟下面表身对齐了吗？

我只贴出来表头改动的代码：

                第一季度                第二季度                第三季度                第四季度                            进口                出口                进口                出口                进口                出口                进口                出口            

在浏览器中效果如下：

接下来我再写表脚。

表脚一般是用来汇总数据的。

比如每一个季度，农产品、水产品、工业品总共进口了多少，可以汇总到表脚部分。

那么加上表脚，所有的代码如下：

    表格其他特性

第一季度 第二季度 第三季度 第四季度 进口 出口 进口 出口 进口 出口 进口 出口 农产品 100 102 104 106 105 103 101 99 水产品 76 83 79 85 74 81 69 77 工业品 200 202 204 206 205 203 201 199 汇总 376 387 387 397 384 387 371 375

在浏览器中效果如下：

cellspacing和cellpadding属性

cellspacing属性(使用百分比或像素)定义了两个单元格之间空间的大小。

cellpadding属性定义了单元格中的内容和边框之间空间的大小。

注意：

cellspacing和cellpadding这两个属性在HTML5中都已经废弃，都是采用css代码来实现这两个属性的效果。

那为什么在这里还要提它们呢？

因为虽然它们已经被废弃了，但是还是能用的，用它们的话，还是能够生效的，如果在实际开发中，你想用它们，也没有问题。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！