必须用语义化标签，含及scope属性，禁用div模拟表格；移动端需媒体查询转block布局；价格须包裹以保障排版与可访问性。

必须用 <table>，别碰 <code>div + Grid/Flex 模拟表格——语义错、打印错、读屏器读不出“哪列是专业版”，改一次价格还得调三处 CSS。

为什么 <thead> 和 <code><tbody> 不能省 <p>浏览器和屏幕阅读器靠这两个标签区分“哪些是标题、哪些是数据”。只写 <code><table> <tr><th>基础版</th></tr> <tr><td>✓</td></tr> </table>，辅助技术会把第一行当普通数据行读，用户听到的是“基础版、盒子、盒子”，而不是“基础版，价格列，¥99”。

• <thead> 必须包住所有列头行，且每个 <code><th> 带 <code>scope="col"
• <tbody> 必须包住所有产品行，每行一个套餐，不要把多款产品塞进同一 <code><tr> <li>避免 <code>colspan 或 rowspan，除非真有多级表头（如“服务支持”下再分“响应时间”“SLA”）

scope="row" 必须加在功能项单元格上

功能名不是装饰文字，是语义锚点。比如“存储空间”“API 调用次数”这些行标题，不加 scope="row"，读屏器就无法把“¥299”和“API 调用次数”关联起来，只会读“第三行第二列：¥299”。


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
• 第一列全部用 <th scope="row">，不是 <code><td>，也不是混用 <code><th> 不带属性 <li>如果某功能需分组（如“安全”大类下含“SSL 证书”“双因素认证”），用 <code><th scope="rowgroup"> + 嵌套 <code><tbody>，别用 <code>colspan 硬撑
• 所有数据单元格统一用 <td>，哪怕内容是 “—” 或 “✓” <h3>移动端不是缩放，是重排</h3> <p>加 <code>overflow-x: auto 到 <table> 本身没用，它不会触发滚动；包一层 <code><div class="table-container"> 再设 <code>overflow-x: auto，只是让用户左右拖拽——这不算响应式，是妥协式布局。
  • 真正可用的方案是媒体查询中把 <tr>、<code><th>、<code><td> 全部设为 <code>display: block，让每款产品变成独立区块
  • 每个 <tr> 在小屏下渲染为一个带边框的卡片，内部用 <code>flex 或 grid 横向排参数名和值（需额外 wrapper，因为原 <td> 已 block） <li>测试 VoiceOver/TalkBack 朗读顺序：必须是“存储空间 → 基础版值 → 专业版值”，不是“基础版所有项 → 专业版所有项”</li> <li>禁用 <code>table-layout: fixed 和固定 width，否则小屏下文字被截或换行错乱

  最易被忽略的点：价格数字必须单独包裹 <strong></strong> 或加 class="price"，否则右对齐、等宽字体（font-feature-settings: "tnum"）、小数点对齐全失效——空格对齐是幻觉，复制进 Excel 就崩。