HTML表格中cellpadding与cellspacing的区别详解

<!-- 传统HTML属性，不推荐使用 -->
<table cellpadding="10" cellspacing="5">
  <tr>
    <td>内容A</td>
    <td>内容B</td>
  </tr>
</table>

<!-- 现代CSS方法 -->
<style>
  .my-table {
    border-collapse: separate; /* 保持单元格独立边框，border-spacing才有效 */
    border-spacing: 5px; /* 相当于 cellspacing */
  }
  .my-table td, .my-table th {
    padding: 10px; /* 相当于 cellpadding */
    border: 1px solid #ccc;
  }
</style>
<table class="my-table">
  <tr>
    <td>内容A</td>
    <td>内容B</td>
  </tr>
</table>

<!-- border-collapse: collapse 的情况 -->
<style>
  .collapsed-table {
    border-collapse: collapse; /* 单元格边框合并 */
  }
  .collapsed-table td, .collapsed-table th {
    padding: 10px; /* 依然是内容与边框的距离 */
    border: 1px solid #ccc; /* 边框会合并，所以看起来没有间隙 */
  }
</style>
<table class="collapsed-table">
  <tr>
    <td>内容A</td>
    <td>内容B</td>
  </tr>
</table>

在表格设计中，除了间距，还有哪些关键的视觉和交互考量？

表格的设计远不止于调整间距，它是一个综合性的工程，需要兼顾视觉美观、数据可读性、用户交互以及响应式表现。

一个经常被忽视但极其重要的点是行高与字体大小的协调。如果行高太小，即使有足够的padding，文字也显得拥挤；如果字体太大而行高不够，同样会影响阅读。我个人经验是，一个合适的行高（line-height）通常是字体大小的1.5到1.8倍，这能给文字提供足够的“呼吸空间”。

其次是边框与背景色的运用。清晰的边框可以帮助用户区分不同的单元格和行，但过粗或颜色过深的边框会显得笨重。我更倾向于使用细线（1px）和浅灰色边框。交替的行背景色（斑马线效果）是提升可读性的利器，尤其是在数据量大的表格中，它能有效帮助用户追踪一行数据，避免串行。

对齐方式也是一个细节，但影响深远。文本内容通常左对齐，数字和货币值右对齐，这符合我们阅读习惯。而表格标题（