在HTML5中控制表格间距离主要通过CSS实现：，1. 使用
border-spacing属性设置单元格间距（需保持border-collapse: separate）。，2. 通过margin属性控制表格与周围元素的间距。，3. 结合padding调整单元格内容与边框的距离。，“css，table {， border-spacing: 10px; /* 单元格间距 */， margin: 20px; /* 表格外间距 */，}，td {， padding: 15px; /* 单元格内边距 */，}，“在HTML5中，调整表格间的距离（包括表格外部间距和内部单元格间距）主要通过CSS实现,以下是具体方法及代码示例：
表格外部间距（相邻表格或表格与其他元素的距离）
使用CSS的 margin 属性控制表格外部的空白区域：
<style>
table {
margin: 20px; /* 四边统一间距 */
/* 或单独设置：margin-top: 15px; margin-bottom: 30px; */
}
</style>
<table>
<!-- 表格内容 -->
</table>
<div>其他内容</div>
<table>
<!-- 表格内容 -->
</table>
- 效果：第一个表格下方和第二个表格上方各产生20px间距（相邻表格间距为40px）。
表格内部间距（单元格间距离）
方法1：CSS的 border-spacing（推荐）
<style>
table {
border-spacing: 10px; /* 单元格水平+垂直间距 */
/* 或分开设置：border-spacing: 8px 15px; (水平 垂直) */
}
td {
border: 1px solid #ccc; /* 仅用于演示边框 */
}
</style>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
- 关键点：
- 需设置
border-collapse: separate;（默认值）才能生效。 - 不支持负值。
- 需设置
方法2：废弃的HTML属性（不推荐）
<table cellspacing="10"> <!-- 表格内容 --> </table>
- 注意：
cellspacing是HTML4属性，HTML5已废弃,建议用CSS替代。
单元格内边距（内容与边框的距离）
使用 padding 调整单元格内容与边框的距离：
<style>
td, th {
padding: 12px; /* 内容与单元格边框的距离 */
}
</style>
完整示例代码
<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
margin-bottom: 40px; /* 表格容器下边距 */
}
table {
border-spacing: 15px 8px; /* 单元格水平15px 垂直8px */
margin: 25px 0; /* 表格上下25px外边距 */
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr><td>表格1-单元格1</td><td>表格1-单元格2</td></tr>
</table>
</div>
<div class="table-container">
<table>
<tr><td>表格2-单元格1</td><td>表格2-单元格2</td></tr>
</table>
</div>
</body>
</html>
注意事项
- 响应式设计：使用百分比或相对单位（如
vw）适配移动端：table { margin: 2vw; border-spacing: 1.5vw; } - 边框重叠问题：若需合并边框，用
border-collapse: collapse;（border-spacing失效）。 - 浏览器兼容性：所有现代浏览器均支持
border-spacing和margin。
引用说明参考MDN Web文档关于border-spacing和margin的权威定义，遵循W3C HTML5标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/45902.html
