HTML表格间距设置方法：cellpadding与cellspacing详解

在HTML网页开发中，表格是展示结构化数据的重要元素，合理的表格间距能提升内容的可读性。HTML提供了cellpadding和cellspacing两个属性用于设置表格间距，二者作用范围和使用场景存在明显区别，本文将详细介绍两者的定义、用法及差异。

一、cellpadding属性：单元格内边距设置

cellpadding属性用于定义表格单元格内部内容与单元格边框之间的间距，单位是像素（px），该属性需要添加在<table>标签上，对表格内所有单元格生效。

1. 基本语法

<table cellpadding="数值">
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

2. 使用示例

当设置cellpadding="10"时，每个单元格的内容会距离单元格上下左右边框各10像素，代码示例：

<table border="1" cellpadding="10">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

上述代码中，表格每个单元格的文本内容会和单元格边框保持10像素的距离，避免内容紧贴边框显得拥挤。

二、cellspacing属性：单元格外间距设置

cellspacing属性用于定义表格中相邻单元格之间的间距，以及单元格与表格边框之间的间距，单位同样是像素（px），也需要添加在<table>标签上生效。

1. 基本语法

<table cellspacing="数值">
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

2. 使用示例

当设置cellspacing="8"时，相邻单元格之间会有8像素的空白，单元格和表格边框之间也会有8像素的空白，代码示例：

<table border="1" cellspacing="8">
  <tr>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>90</td>
    <td>95</td>
  </tr>
</table>

上述代码中，两个单元格之间会出现8像素的间隔，表格最外层的单元格和表格边框之间也会保留8像素的距离。

三、cellpadding与cellspacing的核心区别

二者虽然都用于设置表格间距，但作用维度和效果完全不同，具体差异如下：

四、HTML5中的替代方案

由于cellpadding和cellspacing属于HTML4的遗留属性，在HTML5中已经不推荐使用，更规范的做法是通过CSS来设置表格间距：

• 替代cellpadding：使用CSS的padding属性设置单元格内边距，示例代码：

/* 设置所有单元格内边距为10px */
table td, table th {
  padding: 10px;
}

• 替代cellspacing：使用CSS的border-spacing属性设置单元格间距，需要注意表格的border-collapse属性要设置为separate（默认值），示例代码：

table {
  border-collapse: separate;
  border-spacing: 8px; /* 对应cellspacing="8" */
}

五、注意事项

如果同时设置cellpadding和cellspacing，两个属性会同时生效，分别控制内部和外部间距。另外如果需要合并单元格边框，可以将border-collapse设置为collapse，此时cellspacing和border-spacing都会失效，因为边框合并后单元格之间没有间隔。

在实际开发中，为了保证代码的规范性和兼容性，建议优先使用CSS属性来设置表格间距，避免使用HTML4的遗留属性。

HTML表格cellpaddingcellspacing表格间距CSS样式