table 中 cellspacing 与 cellpadding 区别

table是什么？它是由一个个cell单元格构成的，在表格中， 的个数取决于每行 中包裹的cell单元格个数！此外，默认table表格在没有添加css样式 table tr td,th{border:1px solid #000;}之前,在浏览器中显示是没有表格线的；

html中常见table写法:A. … :表格的一行,有几对tr表格就有几行； B. … :表格的一个单元格,一行中包含几对 ... ,说明一行中就有几列； C. … :表格的头部的一个单元格,表格表头,文本默认为粗体并且居中显示；D. /*摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。*/ E.caption标签,为表格添加标题和摘要,标题用以描述表格内容，标题的显示位置：表格上方

Header Data 登录后复制 今天星期五/th> today is Friday 登录后复制 言归正传，cellpadding 和cellspacing区别，先看下面一组表格图片与cellspacing代码的对比：

table中cellspacing的区别 table{ margin-bottom: 50px; } .ceshi{ border-spacing: 20px; /*Specifies the distance between the borders of adjoining cells in a table. */ } 第一个单元格 测试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的区别 table{ margin-bottom: 50px; } 我是快乐的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的区别 table{ margin: 0 auto; margin-bottom: 50px; text-align: center; } 正常展示：一行三列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办？colspan跨列合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 正常展示：二行二列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办?rowspan跨行合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 说点啥了,不知道 登录后复制 拓展二：如何合并表格边框？border-collapse: collapse;

table{ border-collapse: collapse; /* border-collapse: separate; */ /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */ } 单元格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教程 》

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

table 中 cellspacing 与 cellpadding 区别