web前端入门到实战：table中cesllspacing与cellpadding的区别

table是什么？它是由一个个cell单元格构成的，在表格中，的个数取决于每行中包裹的cell单元格个数！此外，默认table表格在没有添加css样式 15 16 17 18 19 20 21 22 23

第一个单元格

测试1

测试2

测试3

24 25 26 27 28 29 30 31

第二个单元格

测试1

测试2

测试3

32 33 34 35 36 37 38 39

第三个单元格

测试1

测试2

测试3

40 比较代码，最上面的两个表格只有cellspacing的设置不同，一个为”0“，一个为”20“，显示的结果就是第一个表格的每个单元格之间的距离为0，第二个表格的每个单元格之间的距离为20；延伸下：第二个表格与第三个表格一致，但是第三个表格没有设置cellspacing，我们发现这个border-spacing: 20px;与cellspacing="20" 的结果一样一样的，e.g小结：cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。 1 2 3 4 5 6 11 12 13 14 15 16 17 18 19

我是快乐的cell表格	我是快乐的cell表格	我是快乐的cell表格

20 21 22 23 24 25 26

我是快乐的cell表格	我是快乐的cell表格	我是快乐的cell表格

27 28 从上面的代码运行展示结果来看：两个表格只有cellpadding代码值不同，第一个表格中"我是快乐的cell表格"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因；第二个表格中的"我是快乐的cell表格"这几个字离它所在的单元格比较远，那是因为cellpadding="20",也就是说"我是快乐的cell表格"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。||注意 cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。 e.g小结:cellspacing代表的是单元格与单元格之间的距离，cellpadding表示的是单元格内容与边框的距离；前者的理解像margin,后者像padding；巢(cell)--表格的内容；巢补白(表格填充)(cellpadding)--代表巢外面的一个距离，用于隔开巢与巢空间；巢空间(表格间距)(cellspacing)--代表表格边框与巢补白的距离，也是巢补白之间的距离 拓展一：表格的行与列如何合并？colspan跨列合并，rowspan跨行合并 代码展示： 1 2 3 4 5 6 13 14 15 16 17 18 19 20 21 22

正常展示：一行三列

说点啥了,不知道

说点啥了,不知道

说点啥了,不知道

23 24 25 26 27 28 29 30

现在要展示一行二列,怎么办？colspan跨列合并

说点啥了,不知道

说点啥了,不知道

31 32 33 34 35 36 37 38 39 40 41 42

正常展示：二行二列

说点啥了,不知道	说点啥了,不知道
说点啥了,不知道	说点啥了,不知道

43 44 45 46 47 48 49 50 51 52 53

现在要展示一行二列,怎么办?rowspan跨行合并

说点啥了,不知道	说点啥了,不知道
	说点啥了,不知道

54 55 拓展二：如何合并表格边框？border-collapse: collapse; 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 1 2 9 10 11 12 13 14 15 16 17

单元格1

单元格2

单元格3

最后chrome浏览器中，系统默认的表格边框颜色grey，边框间距为2等等 1 /* user agent stylesheet */ 2 /* table { 3 display: table; 4 border-collapse: separate; 5 border-spacing: 2px; 6 border-color: grey; 7 } */ 8 9 /* border="1"默认等于border="1px" 10 border-top-width: 1px; 11 border-right-width: 1px; 12 border-bottom-width: 1px; 13 border-left-width: 1px; */ 14 15 /* bordercolor返回或设置对象的边框颜色 16 bordercolor:W3C - String 17 Specifies the color of the border of the element. Specify either a color name or RGB color code. 18 */

本文章由javascript技术分享原创和收集