HTML5中rules属性已被正式弃用，它仅是纯渲染开关，无语义化能力，不支持无障碍；应改用结构配合CSS边框选择器实现语义化、可访问的表格边框控制。
HTML5 中 rules 属性**已被正式弃用**，它不具语义化控制能力，也不推荐用于现代开发。所谓“语义化显示”是误解——rules 仅是表现层的简单开关，不表达结构意图，也无法配合无障碍（a11y）或 CSS 逻辑实现真正语义化的边框管理。
rules 属性的真实定位：非语义、纯渲染开关
它只是在 border-collapse: collapse 模式下，统一绘制内部行列分隔线的快捷方式，取值（none、rows、cols、all、groups）只决定“画哪几条线”，不说明“为什么画”或“这条线代表什么逻辑关系”。例如：
-
rules="groups"看似语义化，实则仅依赖是否有<thead>/<code><tbody> 标签——即使这些标签被滥用或缺失语义，它也照常画线；<li> <code>rules="rows"并不表示“此表按行组织数据”，只是视觉上加了横线，屏幕阅读器完全感知不到该设置； - 它无法与
scope、headers或 ARIA 属性联动，对可访问性零贡献。 - 用
<thead>、<code><tbody>、<code><th scope="col"> 明确标注数据维度，这是语义基础；<li>用 CSS 选择器精准控制边框，例如：<br><code>tbody tr + tr { border-top: 1px solid #e0e0e0; }表示“表体中后续行的顶部线”，隐含层级关系； - 为不同逻辑区域添加 class，如
<tr class="summary-row">，再通过 <code>.summary-row { border-top: 2px double #333; }强化语义视觉反馈； - 结合
role="rowgroup"或aria-labelledby等增强可访问性，让辅助技术理解边框背后的结构意义。 - 无法设置颜色、线型、圆角等基本样式；
- 不支持响应式条件（比如“小屏时只显行线”）；
- 与 CSS 的
border-collapse、outline、box-shadow等机制无法协同； - 浏览器兼容行为不一致（Chrome/Safari 会意外影响外边框，IE8- 完全不支持）。
- 删掉所有
rules属性； - 确保表格有合理分组（
<thead>、<code><tbody>）和表头关联（<code>scope或id/headers）； - 写 CSS 控制边框，例如：
th, td { border-right: 1px solid #eee; }<br>th:last-child, td:last-child { border-right: none; }<br>tbody tr:not(:last-child) td { border-bottom: 1px solid #eee; } - 必要时用
@media调整断点下的边框策略，这才是真正的语义化响应。
真正语义化控制内部边框的替代路径
语义化必须从结构和样式协同出发，而非依赖已淘汰的 HTML 属性：
为什么 rules 在 HTML5 中被移除
W3C 明确指出：rules 违背关注点分离原则，把样式控制混入 HTML 结构，且功能极度受限：
实际建议：用结构+CSS 替代 rules
想实现清晰、可维护、可访问的内部边框效果，直接这样做：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
