当前位置:  首页  >  前端开发  >  CSS+DIV

table中cellspacing与cellpadding区别

这篇文章主要介绍了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表格

代码展示:



    
        
        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社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有