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 属性联动，对可访问性零贡献。

真正语义化控制内部边框的替代路径

语义化必须从结构和样式协同出发，而非依赖已淘汰的 HTML 属性：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 用 <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 等增强可访问性，让辅助技术理解边框背后的结构意义。

为什么 rules 在 HTML5 中被移除

W3C 明确指出：rules 违背关注点分离原则，把样式控制混入 HTML 结构，且功能极度受限：

立即学习“前端免费学习笔记（深入）”；

• 无法设置颜色、线型、圆角等基本样式；
• 不支持响应式条件（比如“小屏时只显行线”）；
• 与 CSS 的 border-collapse、outline、box-shadow 等机制无法协同；
• 浏览器兼容行为不一致（Chrome/Safari 会意外影响外边框，IE8- 完全不支持）。

实际建议：用结构+CSS 替代 rules

想实现清晰、可维护、可访问的内部边框效果，直接这样做：

• 删掉所有 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 调整断点下的边框策略，这才是真正的语义化响应。