您现在的位置是：网站首页> 编程资料编程资料

table中cesllspacing与cellpadding的区别详解IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug

2023-10-08 299人已围观

简介 这篇文章主要介绍了table中cesllspacing与cellpadding的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

第一个单元格
测试1测试2测试3
第二个单元格
测试1测试2测试3
第三个单元格
测试1测试2测试3

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

tabl表格中cellpadding的区别
我是快乐的cell表格我是快乐的cell表格我是快乐的cell表格
我是快乐的cell表格我是快乐的cell表格我是快乐的cell表格

从上面的代码运行展示结果来看：两个表格只有cellpadding代码值不同，第一个表格中"我是快乐的cell表格"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因；第二个表格中的"我是快乐的cell表格"这几个字离它所在的单元格比较远，那是因为cellpadding="20",也就是说"我是快乐的cell表格"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。||注意 cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

e.g小结:cellspacing代表的是单元格与单元格之间的距离，cellpadding表示的是单元格内容与边框的距离；前者的理解像margin,后者像padding；巢(cell)--表格的内容；巢补白(表格填充)(cellpadding)--代表巢外面的一个距离，用于隔开巢与巢空间；巢空间(表格间距)(cellspacing)--代表表格边框与巢补白的距离，也是巢补白之间的距离

拓展一：表格的行与列如何合并？colspan跨列合并，rowspan跨行合并

代码展示：

colspan与rowspan的区别
正常展示：一行三列
说点啥了,不知道说点啥了,不知道说点啥了,不知道
现在要展示一行二列,怎么办？colspan跨列合并
说点啥了,不知道说点啥了,不知道
正常展示：二行二列
说点啥了,不知道说点啥了,不知道
说点啥了,不知道说点啥了,不知道
现在要展示一行二列,怎么办?rowspan跨行合并
说点啥了,不知道说点啥了,不知道
说点啥了,不知道

拓展二：如何合并表格边框？border-collapse: collapse;

单元格1单元格2单元格3

最后chrome浏览器中，系统默认的表格边框颜色grey，边框间距为2等等

 /* user agent stylesheet */ /* table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } */ /* border="1"默认等于border="1px" border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; */ /* bordercolor返回或设置对象的边框颜色 bordercolor:W3C - String Specifies the color of the border of the element. Specify either a color name or RGB color code. */

到此这篇关于table中cesllspacing与cellpadding的区别详解的文章就介绍到这了,更多相关table中cesllspacing与cellpadding内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：捣捣塔小黑副本三星通关图文攻略_手机游戏_游戏攻略_

下一篇：HTML页面插入SVG的多种方式纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网