HTML table的border属性是布尔型快捷方式，设为"1"会自动给外框及所有单元格加1px默认边框，但不支持颜色、线型等样式，且在HTML5中仅具语义作用；现代开发应使用CSS配合border-collapse: collapse精确控制。
table 的 border 属性会自动给所有单元格加边框
HTML 的 border 属性是表格专属的布尔型控制：只要写 border="1"，浏览器就会给 table 外框 + 所有 td、th 内边框都加上 1 像素默认黑线，无需额外声明单元格样式。它本质是“一键启用全表边框”的快捷方式，不是单纯设置外边框宽度。
常见误用是以为 border="2" 就能让外框变粗——实际它只影响外框粗细，内部单元格边框仍固定为 1px（这是历史行为，各浏览器一致）。如果你看到内边框没变粗，不是 bug，是设计如此。
-
border="0"表示禁用所有边框（包括内外），等价于 CSS 中完全不设边框 -
border属性不支持颜色、线型（如 dashed）、透明度等任何样式定制 - 该属性在 XHTML 或严格 DOCTYPE 下已废弃，现代项目中应避免使用
CSS 的 border 只作用于当前元素，不会自动扩散到子单元格
写 table { border: 2px solid red; }，只会让表格最外层有一圈红边，td 和 th 依然光秃秃——这点和 HTML border 属性截然不同。要让每个单元格都有边框，必须显式写 td, th { border: 1px solid #333; }。
更关键的是，CSS 边框默认是“分离模式”：相邻单元格各自画自己的边框，结果会出现双线重叠（比如两个 td 挨着，中间就有两条 1px 线）。这时候必须配 border-collapse: collapse; 才能合并成单线。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 漏写
border-collapse: collapse;是表格边框看起来“粗了一倍”或“错位”的最常见原因 -
border-spacing只在border-collapse: separate;时生效，设成0不能替代collapse - 想让某列无边框？直接给对应
td设border-left: none;，HTMLborder属性做不到这点
为什么 border="1" 有时看起来没效果？
这不是代码写错了，而是被 CSS 覆盖了。HTML border 属性的优先级极低，一旦页面里有任何 CSS 规则匹配到 table 或 td，比如 table { border: none; } 或 td { border: 0; }，它就立即失效。
另一个隐形陷阱：边框颜色和背景色一样。例如 td { border: 1px solid white; background: white; }，边框就“消失”了——这种问题在深色主题切换时特别容易冒出来。
- 调试时先检查 computed styles，看
border是否被 override 或 color 是否为 transparent - 用浏览器开发者工具临时禁用所有 CSS，确认
border="1"本身是否起作用 - 别依赖
border属性做响应式适配，它无法配合媒体查询动态调整
实际项目里怎么选？
新项目一律用 CSS。哪怕只是快速原型，也建议从一开始就写类名，比如 <table class="table-bordered">，然后统一定义：
table.table-bordered {
border-collapse: collapse;
}
table.table-bordered td,
table.table-bordered th {
border: 1px solid #ddd;
}
这样既能复用，又方便后续加 hover 效果、zebra striping 或 dark mode 支持。HTML border 属性只适合遗留系统临时修复，或者纯静态文档生成场景——它的不可控性在协作开发中很快就会变成维护负担。
真正容易被忽略的点是：即使你只用 CSS，也得记住 tr 元素不支持 border，想给整行加边框，得靠 td 或 th 的左右边框组合；而 tbody、thead 这些语义容器，border 同样无效。
