如何使用CSS制作表格样式_border collapse与padding应用

使用 border-collapse 和 padding 可显著优化表格样式：border-collapse: collapse 能合并边框，消除双线间距；合理设置 padding（如 th 10px 12px，td 8px 12px）提升内容可读性；结合字体、颜色等属性可打造整洁专业的表格。

在网页开发中，表格的样式优化能显著提升数据的可读性和整体美观度。CSS 提供了多种方式来美化表格，其中 border-collapse 和 padding 是两个关键属性。合理使用它们可以让表格边框更紧凑、内容更清晰。

使用 border-collapse 控制边框合并

默认情况下，HTML 表格的单元格边框是分开的，会产生双线效果和额外间距。通过 border-collapse 属性可以解决这个问题。

常用取值：

• collapse：将相邻边框合并为一条线，常用于简洁风格的表格
• separate：默认值，边框独立显示

示例代码：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
}

这样设置后，表格的上下左右边框会自然衔接，视觉上更加整洁。

通过 padding 增强内容可读性

单元格内的文字紧贴边框会影响阅读体验。使用 padding 可以在文本与边框之间增加空白区域。

建议设置合理的内边距，让内容“呼吸”：

• 一般情况下，padding: 8px 12px; 是比较舒适的值
• 若表格信息密集，可适当缩小至 6px～8px
• 标题行（th）可略大于数据单元格（td），突出区分

示例：

th {
  padding: 10px 12px;
  background-color: #f5f5f5;
}
td {
  padding: 8px 12px;
}

结合使用提升整体效果

将 border-collapse 与 padding 结合，再配合简单的颜色和字体设置，就能快速打造专业级表格。

完整示例：

table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

基本上就这些。掌握 border-collapse 和 padding 的搭配使用，能让表格从“能看”变成“好看”。不复杂但容易忽略细节，比如边框颜色一致性、内边距对齐等，多试几次就能找到最适合项目风格的配置。