首页 > web前端 > css教程 > 正文

table 中 cellspacing 与 cellpadding 区别

Guanhui
发布: 2020-06-28 18:09:55
转载
5138 人浏览过

table 中 cellspacing 与 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. 
*/
登录后复制

推荐教程:《CSS教程

以上是table 中 cellspacing 与 cellpadding 区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:jb51.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!