控制单元格间距可用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属性实现。虽然两者功能相似，但使用方式和兼容性有所不同。
cellspacing是HTML表格标签的原生属性，用于设置相邻单元格边框之间的距离（即外间距）。它直接写在<table>标签中，适用于快速简单布局。
<font color="#0000FF"><table>cellspacing="10"><br>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<br>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<br>
</table></font>
<p>上述代码会让每个单元格之间有10像素的间距。注意：该属性在HTML5中已被废弃，推荐使用CSS替代。</p>
<h3>2. 使用CSS的border-spacing属性</h3>
<p>更现代、推荐的做法是使用CSS的<code>border-spacing属性。它作用与cellspacing相同，但需配合border-collapse: separate使用（默认值）。
立即学习“前端免费学习笔记（深入）”；
这样设置后，水平和垂直间距均为10px。也可分别设置：border-spacing: 10px 5px; —— 水平10px，垂直5px。
border-collapse: collapse，则border-spacing无效，所有边框合并为一条线。cellspacing仅对<table>有效，无法用CSS选择器继承或覆盖。
<li>
<a style="color:#f60; text-decoration:underline;" title="响应式设计" href="https://www.php.cn/zt/27273.html" target="_blank">响应式设计</a>中建议使用CSS，便于适配不同屏幕尺寸。</li>
<li>旧版IE支持<code>cellspacing，但现代开发应优先使用CSS方案。基本上就这些。虽然cellspacing写起来简单，但从标准和维护角度出发，用CSS的border-spacing更合适。不复杂但容易忽略的是border-collapse的影响，记得检查这一点。
以上就是HTML表格单元格间距怎么设_HTML表格cellspacing与CSS间距设置的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
426
收藏
