HTML表格单元格间距设置技巧

想知道HTML表格单元格间距如何设置吗？本文详细介绍了两种关键方法：一是利用HTML的`cellspacing`属性，直接在`

`标签中设置单元格间距，简单快捷但已被HTML5废弃。二是推荐使用CSS的`border-spacing`属性，配合`border-collapse: separate`，不仅能统一设置水平和垂直间距，还能分别控制，更灵活且兼容性更好。尤其需要注意的是，当`border-collapse`设置为`collapse`时，`border-spacing`将失效。掌握这些技巧，让你的HTML表格布局更加美观和专业！响应式设计更推荐CSS方案，便于维护和适配。

控制单元格间距可用cellspacing属性或CSS的border-spacing属性。1. cellspacing是HTML属性，直接设在table标签中，如cellspacing="10"表示10像素间距，但HTML5已废弃此法。2. 推荐使用CSS的border-spacing，需配合border-collapse: separate，可设统一或分别的水平垂直间距。3. 注意border-collapse为collapse时border-spacing无效，且响应式设计宜用CSS以提升兼容与维护性。

在HTML表格中，控制单元格之间的间距主要通过cellspacing属性或CSS的border-spacing属性实现。虽然两者功能相似，但使用方式和兼容性有所不同。

1. 使用HTML的cellspacing属性

cellspacing是HTML表格标签的原生属性，用于设置相邻单元格边框之间的距离（即外间距）。它直接写在

标签中，适用于快速简单布局。

cellspacing="10">
  
  

单元格1	单元格2
单元格3	单元格4

上述代码会让每个单元格之间有10像素的间距。注意：该属性在HTML5中已被废弃，推荐使用CSS替代。

2. 使用CSS的border-spacing属性

更现代、推荐的做法是使用CSS的border-spacing属性。它作用与cellspacing相同，但需配合border-collapse: separate使用（默认值）。

这样设置后，水平和垂直间距均为10px。也可分别设置：
border-spacing: 10px 5px; —— 水平10px，垂直5px。

3. 注意事项与兼容性

• 如果表格设置了border-collapse: collapse，则border-spacing无效，所有边框合并为一条线。
• cellspacing仅对有效，无法用CSS选择器继承或覆盖。
  响应式设计中建议使用CSS，便于适配不同屏幕尺寸。
  旧版IE支持cellspacing，但现代开发应优先使用CSS方案。

  基本上就这些。虽然cellspacing写起来简单，但从标准和维护角度出发，用CSS的border-spacing更合适。不复杂但容易忽略的是border-collapse的影响，记得检查这一点。

  文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML表格单元格间距设置技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。