采用 web standard 开发时如何设定表格的单元格间距

最新推荐文章于 2023-09-22 01:46:34 发布

nchen123

最新推荐文章于 2023-09-22 01:46:34 发布

阅读量1.8k

点赞数 1

分类专栏：网页技术文章标签： web mozilla table html border ie

本文链接：https://blog.csdn.net/inelm/article/details/4613138

版权

在进行Web标准开发时，设定表格单元格间距的方法包括使用HTML的`cellspacing`属性，例如`<table cellspacing="0">...</table>`。虽然CSS2提供了`border-collapse`和`border-spacing`组合来实现相同效果，但`border-spacing`在IE6中不受支持，而Mozilla浏览器则正常。最佳实践建议继续使用`cellspacing`属性进行间距设置。

摘要由CSDN通过智能技术生成

答案是仍然使用 HTML 中 table 的 cellspacing 属性。如下：
<table cellspacing="0">
...
</table>

除此之外理论上在 CSS2 中，可以设定下列两个样式的组合来达到效果。
1. border-collapse: separate; (独立边框，不合并）
2. border-spacing: length || length;

这里的长度 length 如果指定一个，那么作用于上下左右间隔；如果指定两个，第一个指横向间距，第二个指纵向间距。
border-spacing 必须在 border-collapse 样式设置为 separate 的时候才起作用。

但是 border-spacing 属性的支持不好。在 IE6 里也看不到效果，而 Mozilla 可以正常显示。所以处理间距最好的方式还是使用 <table cellspacing=".."> 这种写法。

下列文档可分别加载到 Mozilla 和 IE 中测试效果：