HTML表格怎么单元格间距_HTML表格间距设置方法

调整HTML表格单元格间距的方法包括：一、使用cellspacing属性设置整体间距，如cellspacing="10"；二、用CSS的border-spacing配合border-collapse: separate实现精确控制；三、通过padding增加内容与边框距离提升可读性；四、在collapse模式下用display和margin模拟间距。

如果您发现HTML表格中的单元格紧挨在一起，影响了页面的美观和可读性，可能是因为没有正确设置单元格之间的间距。以下是调整HTML表格单元格间距的几种方法：

一、使用cellspacing属性设置表格边框间距

cellspacing属性用于控制表格中相邻单元格边框之间的距离，适用于整个表格的外部间距调整。

1、在<table>标签中添加cellspacing属性，并设置数值，例如：cellspacing="10"表示单元格之间有10像素的间距。

2、完整示例如下：<table cellspacing="10" border="1"><tr><td>内容</td></tr></table>。

立即学习“前端免费学习笔记（深入）”；

二、使用CSS的border-spacing属性

border-spacing是CSS中专门用于控制表格布局中文本单元格之间间距的属性，仅在table-layout为separate时生效。

1、为<table>元素添加CSS样式，设置border-spacing值，例如：style="border-spacing: 15px 5px;"，其中第一个值为水平间距，第二个为垂直间距。

2、确保同时设置CSS属性border-collapse为separate，否则border-spacing将不生效。

3、示例代码：<table style="border-collapse: separate; border-spacing: 15px 5px;">。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

三、通过padding属性增加单元格内边距

padding属性可以增大单元格内容与边框之间的距离，从而间接实现视觉上的“间距”效果。

1、选中<td>或<th>元素，为其添加内边距，例如：style="padding: 10px;"。

2、可分别设置上下左右的padding值，如：style="padding: 8px 12px;"，前者为上下，后者为左右。

3、此方法不会改变单元格之间的边框距离，但能提升内容的可读性和美观度。推荐结合border-collapse: collapse使用。

四、使用CSS margin配合display属性模拟间距

当表格使用了border-collapse: collapse时，border-spacing失效，可通过将单元格转为块级元素并设置外边距来模拟间距。

1、将<td>元素设置为display: block或inline-block，并添加margin属性。

2、例如：td { display: inline-block; margin: 5px; width: 100px; }，此时需注意表格原始结构可能被破坏。

3、该方法适用于非标准表格布局或自定义样式需求，需谨慎使用以避免布局错乱。

以上就是HTML表格怎么单元格间距_HTML表格间距设置方法的详细内容，更多请关注php中文网其它相关文章！