HTML表格单元格内边距设置方法

想要精准控制HTML表格单元格的内边距？别再使用过时的`cellpadding`属性了！本文详细讲解如何使用CSS `padding`属性替代`cellpadding`，轻松设置单元格内容与边框之间的间距。通过为`td`或`th`标签设置`padding`值，即可实现相同的效果。更推荐使用CSS类统一控制表格样式，简化代码，提高可维护性。同时，别忘了配合`border-collapse: collapse`属性，确保表格边框合并，布局更加紧凑美观。掌握这些技巧，让你的HTML表格在各种浏览器中都能呈现出最佳效果！

HTML5中cellpadding属性已被废弃，推荐使用CSS padding替代。通过为td或th设置padding值（如10px），可实现等效效果；建议使用CSS类统一控制所有单元格内边距，并配合border-collapse: collapse确保边框合并、布局紧凑，从而获得更精确的样式控制。

在HTML中，cellpadding 属性曾用于设置表格单元格内容与边框之间的间距（即内边距）。但随着HTML5的发展，cellpadding 已被废弃，推荐使用CSS来替代。通过CSS的 padding 属性，可以更灵活、精确地控制单元格内边距。

使用CSS padding替代cellpadding

要实现类似 cellpadding="10" 的效果，只需为表格的单元格（td 或 th）设置CSS padding 属性。

示例：

<table style="border-collapse: collapse;">
  <tr>
    <td style="padding: 10px; border: 1px solid #000;">单元格1</td>
    <td style="padding: 10px; border: 1px solid #000;">单元格2</td>
  </tr>
</table>

上面代码中，每个单元格的内边距设为10px，等效于 cellpadding="10"。

统一设置所有单元格的内边距

如果希望整个表格的单元格都拥有相同的内边距，建议使用CSS类或选择器进行统一设置，避免重复写样式。

示例：

<style>
  .my-table td,
  .my-table th {
    padding: 8px;
    border: 1px solid #ddd;
  }
</style>

<table class="my-table">
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

这样所有带有 .my-table 类的表格单元格都会应用8px的内边距。

注意border-collapse的影响

当使用 border-collapse: collapse 时，相邻单元格的边框会合并，此时 padding 的表现更加紧凑和可控。若不设置该属性，表格默认为 separate 模式，可能会在单元格之间产生额外间隙。

推荐始终显式设置：

table {
  border-collapse: collapse;
  width: 100%;
}

今天关于《HTML表格单元格内边距设置方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于border-collapse,HTML表格,cellpadding,CSSpadding,单元格内边距的内容请关注golang学习网公众号！