HTML表格怎么设置单元格内边距_HTML表格cellpadding属性的替代CSS方案

在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%;
}

基本上就这些。用CSS的 padding 完全可以取代过时的 cellpadding，还能获得更好的样式控制能力。