最直接的方式是使用cellspacing属性控制单元格边框间距，但现代开发更推荐用CSS的border-spacing和padding实现精细化控制。cellspacing作用于整个表格，定义单元格间的统一距离，而cellpadding控制内容与边框的内边距；两者易混淆，且缺乏灵活性。CSS通过border-collapse: separate配合border-spacing替代cellspacing，通过padding替代cellpadding，支持不同单元格差异化设置、响应式调整及样式分离，避免内联样式和margin误用，提升可维护性与兼容性，是当前最佳实践。
调整HTML表格的间距，最直接的方式是使用
cellspacing属性来控制单元格边框之间的距离。然而，从现代Web开发的角度来看，更灵活、更推荐的做法是利用CSS的
border-spacing和
padding属性进行精细化控制。
解决方案
cellspacing属性直接作用于
<table>标签，它的值定义了表格单元格（
<td>或
<th>）边框与边框之间的空间大小。你可以把它想象成每个单元格都有一个自己的“小房子”，
cellspacing就是这些小房子之间街道的宽度。它接受一个像素值（例如
10，表示10像素）或者一个百分比值，不过通常我们用像素会更直观。
例如，如果你想让表格单元格之间有10像素的间距，可以这样写：
立即学习“前端免费学习笔记（深入）”；
<table border="1" cellspacing="10">
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
<tr>
<td>单元格内容3</td>
<td>单元格内容4</td>
</tr>
</table>这里，每个单元格的边框之间都会有10像素的间距。需要注意的是，这个间距是均匀地作用于所有单元格的。如果你想让某个单元格的间距不同，
cellspacing就无能为力了，这正是它局限性所在。早期HTML开发中，它确实解决了燃眉之急，但随着网页设计对精细控制的需求增加，它的“一刀切”方式就显得有些笨拙了。有时候，我们还会发现不同浏览器对
cellspacing的渲染可能存在细微差异，这在追求像素完美的时代是挺让人头疼的。
cellspacing与cellpadding有什么区别？
这是一个老生常谈但又不得不提的问题，尤其是在刚接触HTML表格布局时，很容易把这两个概念混淆。简单来说，
cellspacing是“单元格与单元格之间的距离”，而
cellpadding则是“单元格内容与单元格边框之间的距离”。
再形象一点，如果你把表格想象成一栋公寓楼，每个
<td>就是一套房子：
cellspacing
就是房子与房子之间，或者说房子外墙与外墙之间的公共走廊或绿化带。它决定了相邻单元格边框之间的空白。cellpadding
则是房子内部，墙壁与家具（内容）之间的距离。它控制的是单元格内容（比如文字、图片）到单元格边框的内边距。
举个例子，假设你有一个表格，内容是文字“Hello”。
- 如果你设置
cellspacing="10"
，那么这个“Hello”所在的单元格边框，会与它旁边的单元格边框之间有10像素的空隙。 - 如果你设置
cellpadding="10"
，那么“Hello”这个文字，距离它自己单元格的上下左右四个边框，都会有10像素的内边距。文字不会紧贴着边框。
在实际开发中，理解这两者的区别至关重要。错误地使用它们，可能会导致布局混乱，或者达不到预期的视觉效果。比如，你可能想让文字离边框远一点，结果却把整个表格撑大了。反之亦然。虽然现在我们更倾向于用CSS来控制这些细节，但了解这两个原生属性的含义，对于理解表格布局的演变和兼容性问题，仍然是很有帮助的。
为什么说CSS是调整表格间距的更优选择？
当我们谈论到网页布局和样式控制时，CSS的优势是压倒性的。对于表格间距的调整，CSS不仅提供了更精细的控制，还带来了更好的语义化、可维护性和响应式设计能力。
首先，
cellspacing和
cellpadding是HTML的“表现层”属性，这与HTML作为“结构层”的职责是相悖的。W3C标准一直强调内容与表现分离，所以把样式相关的控制权交给CSS是更规范的做法。
具体到实现上：
-
替代
cellspacing
： 我们可以通过设置表格的border-collapse
属性为separate
（这是默认值，但明确写出来更好），然后给<table>
元素设置border-spacing
属性来控制单元格边框之间的距离。border-spacing
是专门为<table>
设计的，它完美替代了cellspacing
。table { border-collapse: separate; /* 确保边框是分离的，否则 border-spacing 无效 */ border-spacing: 10px; /* 替代 cellspacing，控制单元格边框之间的距离 */ width: 100%; /* 示例：表格宽度 */ } td, th { border: 1px solid #ccc; /* 示例边框 */ padding: 5px; /* 通常和 border-spacing 配合使用，或替代 cellpadding */ }这里
border-spacing
就是CSS中cellspacing
的直接对应。 -
替代
cellpadding
： 这就简单多了，直接给<td>
或<th>
元素设置padding
属性即可。td, th { padding: 10px; /* 替代 cellpadding，控制内容与边框的距离 */ }
CSS的优势在于它的灵活性。我可以针对不同的
<td>应用不同的
padding，比如第一个单元格
padding: 5px;，第二个
padding: 15px;。这在HTML原生属性中是无法想象的。而且，通过媒体查询，我可以让表格在小屏幕上拥有更紧凑的间距，在大屏幕上则更宽松，这对于响应式设计至关重要。维护起来也更方便，所有样式都在一个CSS文件里，修改一个地方就能影响全局。我个人在项目中几乎不会再使用
cellspacing和
cellpadding，除非是维护一些非常老的代码，否则CSS是我的首选。
在调整表格间距时，有哪些常见的坑和最佳实践？
即便有了CSS这个强大的工具，在实际操作中，我们还是会遇到一些“坑”或者说一些需要注意的细节。
常见的“坑”：
-
border-collapse
的误解： 很多人在尝试用CSS控制表格边框和间距时，会忘记border-collapse
这个属性。如果table
的border-collapse
设置为collapse
，那么border-spacing
属性将无效，单元格边框会合并，间距就无从谈起。我见过不少人为此抓狂，以为CSS不生效，其实只是属性冲突了。 -
margin
与padding
的混淆： 虽然理论上margin
是外边距，padding
是内边距，但对于<td>
或<th>
元素，直接设置margin
通常不会产生你期望的单元格间距效果，因为表格单元格的布局模型比较特殊。正确的做法是使用table
上的border-spacing
来控制单元格间距，或者通过padding
来控制内容与边框的距离。 -
内联样式泛滥： 有些开发者为了快速实现效果，直接在HTML标签里写
style="padding: 10px;"
。虽然这能立即看到效果，但长远来看，它破坏了内容与表现分离的原则，增加了维护成本，也使得CSS的级联和继承特性无法充分发挥。尽量将样式写在外部CSS文件或<style>
标签中。
最佳实践：
- 优先使用CSS： 这是毋庸置疑的。所有样式相关的控制都应该通过CSS来实现。
-
理解
border-spacing
和padding
： 明确border-spacing
用于单元格之间的间距，padding
用于单元格内容与边框的距离。这两种属性的组合，可以完全替代cellspacing
和cellpadding
。 - 保持语义化HTML： HTML表格应该只用于展示表格数据，而不是进行布局。如果你发现自己在用表格来排版非表格数据，那可能需要重新审视你的HTML结构了。
- 利用类名和选择器： 为表格、行、单元格添加有意义的类名，这样你就可以通过CSS选择器更精确地控制它们的样式，而不需要依赖于过于复杂的选择器链或者内联样式。
-
响应式考虑： 在CSS中，你可以轻松地通过媒体查询调整表格的间距，以适应不同屏幕尺寸。例如，在小屏幕上减小
border-spacing
和padding
，让表格更紧凑。
总的来说，表格间距的调整，从最初的HTML属性控制，到现在的CSS精细化管理，体现了Web标准不断演进的趋势。掌握CSS的方法，不仅能更好地控制表格样式，也能让你的代码更现代、更易于维护。
