如何在HTML表格中利用cellspacing属性调整HTML表格的网格线粗细

cellspacing不能调整网格线粗细，它只控制单元格间空白距离；真正控制线条粗细需用CSS的border-width和border-collapse: collapse。

cellspacing 不能调整网格线粗细，它只控制单元格之间的空白距离。想调线条粗细，得换思路。

为什么 cellspacing 对线条粗细完全无效

cellspacing 的作用对象是“单元格之间的间隙”，不是边框本身。哪怕你设成 cellspacing="0"，边框还是原来那么粗；设成 cellspacing="5"，也只是把单元格“推开”了，边框线条宽度丝毫没变。常见误解是：把“看起来更细的线”归功于 cellspacing，其实那是靠背景色+小间距“模拟”出来的视觉效果。

用 cellspacing 配合背景色实现“细线”错觉

这是老式 HTML 细线表格的核心技巧，本质是用视觉欺骗替代真实边框控制：

• table 设置 border="0" 和 cellspacing="1"
• table 设置 bgcolor="#333"（即你想呈现的“线”的颜色）
• td 或 th 设置 bgcolor="#fff"（内容区域底色）
• 此时那 1 像素的 cellspacing 空隙，透出的是 table 的背景色，就成了“1px 细线”

注意：这要求所有单元格必须有明确背景色，否则空隙会透出页面背景，线条就断了。

真正可控的线条粗细：必须用 CSS

HTML5 已废弃 border、cellspacing 等内联样式属性对边框粗细的控制能力。现代写法只有一条路：

立即学习“前端免费学习笔记（深入）”；

• 用 border-collapse: collapse 消除默认间距，让边框真正“合并”
• 给 table、th、td 分别设置 border-width，例如 border: 2px solid #000
• 若只要外框粗、内线细，可单独重置：table th, table td { border-width: 1px; }，再用 table { border-width: 3px; }
• 避免用 border-collapse: separate + border-spacing，那会重新引入间隙，干扰线条连续性

直接写 <table border="3"> 在 Chrome 120+、Edge 122+ 中已被忽略，或强制降级为 border="1" —— 这不是 bug，是规范执行。

容易被忽略的兼容性细节

旧项目里混用 cellspacing 和 CSS 边框时，实际渲染结果取决于 border-collapse 的值：

• border-collapse: separate（默认）下，cellspacing 仍生效，但会和 border-spacing 冲突，后者优先级更高
• border-collapse: collapse 下，cellspacing 完全失效，连带 border-spacing 也被忽略
• 如果表格嵌套，外层 cellspacing 不影响内层边框粗细，但可能撑开布局，导致“线变虚”假象

真正要调粗细，别碰 cellspacing —— 它不是开关，只是个过时的间距旋钮。该交棒给 border-width 和 border-collapse 了。