使用border-collapse: collapse合并边框可消除间隙，适用于紧凑型表格；border-spacing在分离模式下控制间距，适合留白设计。配合表头样式、悬停效果和统一内边距，能显著提升表格美观性与专业感。
在CSS初级项目中，表格的视觉呈现往往影响整体页面的专业感。默认情况下，HTML表格的边框会有缝隙、重复线条或间距不均的问题。通过合理使用 border-collapse 和 border-spacing 属性，可以显著提升表格的美观度和可读性。
使用 border-collapse 合并单元格边框
当表格的 border-collapse 设置为 collapse 时，相邻单元格的边框会合并成一条线，避免双线重叠，让表格看起来更整洁。
- 设置
border-collapse: collapse;可消除单元格之间的边框间隙 - 适用于需要紧凑布局的场景，如数据报表、价格表等
- 注意：该属性必须应用在
<table>元素上才有效
示例代码：
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
}
使用 border-spacing 控制边框间距（仅限分离模式）
border-spacing 用于控制单元格之间的距离，但它只在 border-collapse: separate 模式下生效（这也是默认值）。你可以用它来创造呼吸感更强的设计。
立即学习“前端免费学习笔记（深入）”；
- 设置两个值时，分别代表水平与垂直间距，如
border-spacing: 10px 5px; - 常用于卡片式或强调留白的设计风格
- 结合
empty-cells: show|hide可进一步控制空单元格的显示效果
示例代码：
table {
border-collapse: separate;
border-spacing: 12px 6px;
}
td, th {
border: 1px solid #999;
padding: 6px;
background: #f9f9f9;
}
美化建议与实用技巧
除了基础边框控制，还可以配合其他样式增强视觉体验：
- 给表头
th添加背景色和文字居中：background-color: #007bff; color: white; text-align: center; - 使用
hover效果高亮行：tr:hover { background-color: #f1f1f1; } - 设定统一的
padding提升内容可读性 - 避免使用过于粗的边框，1px 是大多数情况下的理想选择
基本上就这些。掌握好 border-collapse 和 border-spacing 的区别与应用场景，就能轻松优化表格外观，让初级项目也显得专业不少。不复杂但容易忽略。
