HTML表格如何通过属性设置表格的间距（代码解析）-html教程-PHP中文网

cellspacing 和 cellpadding 已被 HTML5 废弃，应改用 CSS 的 border-spacing（作用于 table，仅在 border-collapse: separate 时生效）和 padding（作用于 td/th）控制间距与内边距。

html表格如何通过属性设置表格的间距（代码解析）

cellspacing 和 cellpadding 已被废弃，别再用

HTML5 中 cellspacing 和 cellpadding 属性已被移除，继续写在

 标签里不会生效，浏览器会忽略。很多老教程还在教这两个属性，实际项目里硬写只会让你调试半天发现“为什么没反应”。真正起作用的是 CSS：border-spacing 控制单元格间距，padding 控制单元格内容到边框的距离。
用 border-spacing 控制单元格之间的空隙
border-spacing 只对 border-collapse: separate（默认值）有效；如果设了 border-collapse: collapse，这个属性就完全失效。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

单值写法：border-spacing: 8px → 横向和纵向都设为 8px
双值写法：border-spacing: 4px 12px → 先横后纵（水平间距 4px，垂直间距 12px）
必须写在

元素上，不能写在

或	上不支持百分比单位，只接受 `px`、`em`、`rem` 等绝对或相对长度用 padding 调整单元格内容离边框的距离 `padding` 是标准盒模型属性，作用对象是每个	或	，不是整个表格。它控制的是文字/内容和单元格边框之间的空白。推荐统一写在 `td, th` 选择器里，避免逐个加 class `padding: 6px 12px` 比 `padding: 6px` 更可控，尤其当左右需要留白、上下需要紧凑时注意：如果表格用了 `border-collapse: collapse`，`padding` 依然有效，但 `border-spacing` 无效和 `border-spacing` 不同，`padding` 支持所有 CSS 长度单位，包括 `%`（但慎用，容易错位） border-collapse: collapse 会吃掉 border-spacing 很多人想让表格边框合并成一条线，就加 `border-collapse: collapse`，结果发现 `border-spacing` 不管用了——这不是 bug，是规范行为。合并边框模式下，单元格之间没有“间隙”概念，自然不需要 `border-spacing`。要保留间距又想要视觉上的“合边”，可以用 `outline` + `border` 组合模拟，但更稳妥的做法是保持 `separate` 并用 `border-spacing` `border-collapse: collapse` 下，相邻边框会重叠，此时 `border` 的宽度和样式优先级由“胜出规则”决定（比如 `border: 2px solid #000` 会压过 `1px` 的） IE8+ 都支持 `border-collapse`，但旧版 Safari 对 `outline` 在表格中的表现不稳定，别依赖它做关键布局实际效果差异很直观：删掉 `border-collapse` 后突然出现大缝隙，大概率是忘了配 `border-spacing`；加了却没变化，先检查是否误设了 `collapse`。表格样式看似简单，但属性之间互相压制的细节，比想象中更咬人。

或

上

不支持百分比单位，只接受 px、em、rem 等绝对或相对长度

用 padding 调整单元格内容离边框的距离

padding 是标准盒模型属性，作用对象是每个

或

，不是整个表格。它控制的是文字/内容和单元格边框之间的空白。

推荐统一写在 td, th 选择器里，避免逐个加 class
padding: 6px 12px 比 padding: 6px 更可控，尤其当左右需要留白、上下需要紧凑时
注意：如果表格用了 border-collapse: collapse，padding 依然有效，但 border-spacing 无效
和 border-spacing 不同，padding 支持所有 CSS 长度单位，包括 %（但慎用，容易错位）

border-collapse: collapse 会吃掉 border-spacing

很多人想让表格边框合并成一条线，就加 border-collapse: collapse，结果发现 border-spacing 不管用了——这不是 bug，是规范行为。合并边框模式下，单元格之间没有“间隙”概念，自然不需要 border-spacing。

要保留间距又想要视觉上的“合边”，可以用 outline + border 组合模拟，但更稳妥的做法是保持 separate 并用 border-spacing
border-collapse: collapse 下，相邻边框会重叠，此时 border 的宽度和样式优先级由“胜出规则”决定（比如 border: 2px solid #000 会压过 1px 的）
IE8+ 都支持 border-collapse，但旧版 Safari 对 outline 在表格中的表现不稳定，别依赖它做关键布局