1. 基本概念与历史背景
1.1 border 属性的作用及局限
在早期的 Web 开发中，表格边框的绘制主要通过 table border 属性在 table 标签上直接设置，数值越大边框越粗。这种做法把样式和结构绑定在一起，缺乏灵活性和可维护性，因此在复杂页面中不易扩展。
border 属性的出现让开发者能快速为整张表添加外边框，但它的样式粒度有限，无法对单元格、列或行的边框进行独立控制，因此逐步被更加灵活的 CSS 方案所替代。
<table border="1"><tr><td>单元格1</td><td>单元格2</td></tr>
</table>2. 现代实践：使用 CSS 设置表格边框
2.1 通过 CSS 控制边框
在现代前端开发中，CSS 边框属性提供了更丰富的控制能力，包括颜色、样式、宽度，以及对不同边进行独立设置的能力。通过 CSS，可以实现更精细的单元格边框、行边框或列边框样式，同时保持表格的语义结构。
通常会将边框样式应用到 table、th、td，并结合 border-collapse、border-spacing 等属性，达到所需的视觉效果和排版需求。
table { border-collapse: collapse; border: 1px solid #333; }
th, td { border: 1px solid #333; padding: 8px 12px; }3. 边框布局与渲染：border-collapse 与 border-spacing
3.1 border-collapse 的作用与取舍
border-collapse 决定了相邻单元格边框的合并方式。collapse 会让相邻单元格共用同一条边框，常用于简洁的网格效果；separate 则保留单元格之间的边距，适合需要间距的排版场景。
在设计表格时，应根据需求选择合适的 border-collapse 模式，并通过 border-spacing 调整单元格间距。这直接影响边框的外观、可读性和渲染性能。
/* 合并边框示例 */
table { border-collapse: collapse; border: 1px solid #666; }
/* 若要在单元格之间留出间距 */
table.separate { border-collapse: separate; border-spacing: 4px; border: 1px solid #666; }4. 实践中的常见问题与技巧
4.1 兼容性与无障碍性考虑
不同浏览器对表格边框渲染存在微小差异，因此在实现边框样式时，跨浏览器兼容性需要被关注。尽量使用 CSS 控制边框，避免仅依赖 HTML 的 border 属性，从而获得更一致的显示效果。
此外，改变边框样式时应兼顾 可访问性，确保对比度充足、边界清晰，以帮助所有用户正确辨认单元格边界。可通过 CSS 的高对比模式、aria 属性与语义化标签来增强可访问性。
列1 列2 数据 A 数据 B
