frame属性不再常用的原因是其与结构样式分离原则相悖且功能有限，1.它将样式硬编码在html中，维护困难；2.仅能控制边框的有无和位置，无法定义颜色、粗细或样式；3.css提供了更灵活的控制方式，如border属性及border-collapse等。
frame属性在HTML表格中用来控制表格外部边框的显示方式，它决定了表格的哪几条外边框（上、下、左、右）是可见的。然而，在现代Web开发中，我们更多地是依赖CSS来精确控制表格的内外边框，因为它提供了远超frame的灵活性和样式控制能力。
解决方案
frame属性是HTML4时代用于控制表格外边框可见性的一个方式。它有一些预设值，比如void（无边框，默认行为，但浏览器通常会给个细微的）、above（只显示上边框）、below（只显示下边框）、hsides（显示水平边框，即上下）、vsides（显示垂直边框，即左右）、lhs（左边框）、rhs（右边框）、以及box或border（显示所有四条外边框）。
虽然frame能实现简单的边框控制，但它属于表现层属性，与现代Web设计中结构（HTML）与样式（CSS）分离的原则相悖。因此，现在我们几乎不再使用它。
立即学习“前端免费学习笔记（深入）”；
要真正有效且灵活地控制表格的外边框，CSS是唯一且最佳的选择。你可以直接给<table>元素设置<code>border属性，例如border: 1px solid black;，这样就能给表格添加一个整体的外边框。如果需要更精细的控制，可以利用border-top、border-bottom、border-left、border-right等属性来分别设置四条边。
在处理表格边框时，一个非常关键的CSS属性是border-collapse。当border-collapse设置为collapse时，相邻单元格的边框会合并成一个单一的边框，这使得表格的整体外观更统一、更紧凑。如果设置为separate（默认值），单元格之间会保留间距，每个单元格都有独立的边框，表格的外边框也会显得更独立。我个人在多数情况下更倾向于collapse，因为它让表格看起来更专业，也更容易管理整体样式。
为什么现代网页设计中frame属性不再常用？
frame属性之所以在现代网页设计中被弃用或极少使用，核心原因在于它与Web开发的发展趋势格格不入。它将样式信息硬编码在HTML结构中，这与“内容与样式分离”的理念完全相悖。
想象一下，如果你使用frame属性来控制表格边框，当设计需求变更时，比如所有表格的外边框颜色、粗细或样式需要调整，你就不得不去修改每一个HTML文件中的<table>标签。这在大型项目或维护老旧系统时，无疑是巨大的负担。而如果使用CSS，你只需要修改一个CSS文件中的几行代码，就可以实现全局的样式更新，效率和可维护性天壤之别。<p>此外，<code>frame属性的功能非常有限。它只能决定边框的“有无”和“位置”，对于边框的颜色、粗细、样式（实线、虚线、点线等）以及更复杂的视觉效果，它都无能为力。CSS则提供了极其丰富的样式控制能力，你可以定义任何你想要的边框样式，甚至包括渐变、图片边框等高级效果。这种功能和灵活性的巨大差距，使得frame在面对现代设计需求时显得力不从心。对我来说，除非是迫不得已地去维护一些非常老的代码，否则我真的不会考虑使用它。
如何利用CSS精确控制表格的内外边框？
要精确控制表格的内外边框，CSS提供了强大且灵活的工具。关键在于理解border-collapse属性以及如何分别对<table>、<code><th>和<code><td>元素应用边框样式。<p>如果你希望表格有一个整体的外边框，同时内部单元格之间也有清晰的边框，并且边框是合并的（没有双线效果），那么通常会采用以下策略：</p>
<ol><li>
<strong>设置表格的整体外边框：</strong> 给<code><table>元素添加<code>border属性。
table {
border: 2px solid #555; /* 表格的整体外边框 */
}<th>和<code><td>元素添加<code>border属性。th, td {
border: 1px solid #ccc; /* 单元格的内边框 */
padding: 8px; /* 增加内容与边框的间距，提升可读性 */
}table {
border-collapse: collapse; /* 让相邻边框合并 */
}当border-collapse设置为collapse时，浏览器会根据一定的规则（通常是更粗或更实线的边框优先）来决定显示哪个边框，使得表格看起来更加整洁和统一。
然而，如果你想要表格单元格之间有明显的间隔，比如像电子表格那样，每个单元格都像一个独立的“盒子”，并且单元格之间有空白区域，那么你就不能使用border-collapse: collapse;。在这种情况下，border-collapse的默认值separate会生效，并且你可以使用border-spacing属性来控制单元格之间的间距。
.separate-table {
border-collapse: separate; /* 单元格边框独立，不合并 */
border-spacing: 5px; /* 设置单元格之间的水平和垂直间距 */
border: 2px solid blue; /* 整个表格的外边框 */
}
.separate-table th, .separate-table td {
border: 1px solid green; /* 每个单元格的独立边框 */
padding: 8px;
}这种separate模式在某些设计场景下非常有用，比如需要强调每个单元格的独立性，或者表格作为一种布局工具时。选择哪种方式，完全取决于你的具体设计需求和对用户视觉体验的考量。就我个人经验而言，对于大多数数据展示，collapse模式的表格通常更易于阅读和管理。
处理表格边框时可能遇到的常见陷阱与调试技巧
在CSS中处理表格边框，虽然强大但也确实存在一些常见的“坑”，这些问题有时会让开发者感到困惑。
一个最常见的陷阱就是对border-collapse属性的误解或遗漏。很多时候，当你给<table>和<code><th>/<code><td>都设置了边框，却发现表格边框看起来“变粗”了，或者出现了不美观的双线效果，这往往就是因为没有设置<code>border-collapse: collapse;，或者该属性被其他更具体的CSS规则覆盖了。调试时，我会做的第一件事就是打开浏览器的开发者工具（通常是按F12），检查<table>元素的计算样式，确认<code>border-collapse属性是否如我预期那样设置为collapse。
另一个可能遇到的问题是边框的优先级。在border-collapse: collapse;模式下，如果<table>和<code><th>/<code><td>都设置了边框，那么在它们的交界处，通常<code><table>的边框会“胜出”或覆盖掉单元格在该位置的边框。这不是一个错误，而是合并边框的特性。但如果你期望单元格的边框能够延伸到表格的最外围，形成一个统一的视觉效果，那么可能需要调整策略，比如只给<code><th>和<code><td>设置边框，然后让这些单元格的边框自然构成整个表格的轮廓。<p>还有一种情况是表格边框看起来不均匀或有细微的像素偏差。这可能发生在表格的宽度或高度是动态调整，或者在响应式设计中，像素级的渲染差异导致。这时候，开发者工具的“元素”面板和“计算样式”面板就显得尤为重要。你可以选中表格元素或单个单元格，仔细查看它们的盒模型、边框属性以及所有生效的CSS规则，排查是否有冲突、被覆盖或意料之外的样式。我个人在调试这类问题时，经常会尝试暂时禁用一些CSS规则，来快速定位问题的根源。</p>
<p>最后，值得一提的是HTML的<code>cellpadding和cellspacing这两个属性。它们虽然也与表格的外观和边框间距有关（cellspacing控制单元格间距，类似CSS的border-spacing；cellpadding控制内容与单元格边框的距离，类似CSS的padding），但它们同样是HTML的表现层属性。出于保持CSS纯粹性和可维护性的考虑，我们应该优先使用CSS的padding和border-spacing来替代它们。坚持这种做法，能让你的表格样式管理更加规范和健壮。
