必须用语义化<table>标签，含<thead><tbody>及scope属性，禁用div模拟表格；移动端需媒体查询转block布局；价格须包裹<strong>以保障排版与可访问性。
必须用 <table>，别碰 div + Grid/Flex 模拟表格——语义错、打印错、读屏器读不出“哪列是专业版”，改一次价格还得调三处 CSS。
为什么 <thead> 和 <tbody> 不能省
浏览器和屏幕阅读器靠这两个标签区分“哪些是标题、哪些是数据”。只写 <table><tr><th>基础版</th></tr><tr><td>✓</td></tr></table>，辅助技术会把第一行当普通数据行读，用户听到的是“基础版、盒子、盒子”，而不是“基础版，价格列，¥99”。
-
<thead>必须包住所有列头行，且每个<th>带scope="col" -
<tbody>必须包住所有产品行，每行一个套餐，不要把多款产品塞进同一<tr> - 避免
colspan或rowspan，除非真有多级表头（如“服务支持”下再分“响应时间”“SLA”）
scope="row" 必须加在功能项单元格上
功能名不是装饰文字，是语义锚点。比如“存储空间”“API 调用次数”这些行标题，不加 scope="row"，读屏器就无法把“¥299”和“API 调用次数”关联起来，只会读“第三行第二列：¥299”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 第一列全部用
<th scope="row">，不是<td>，也不是混用<th>不带属性 - 如果某功能需分组（如“安全”大类下含“SSL 证书”“双因素认证”），用
<th scope="rowgroup">+ 嵌套<tbody>，别用colspan硬撑 - 所有数据单元格统一用
<td>，哪怕内容是 “—” 或 “✓”
移动端不是缩放，是重排
加 overflow-x: auto 到 <table> 本身没用，它不会触发滚动；包一层 <div class="table-container"> 再设 overflow-x: auto，只是让用户左右拖拽——这不算响应式，是妥协式布局。
立即学习“前端免费学习笔记（深入）”；
- 真正可用的方案是媒体查询中把
<tr>、<th>、<td>全部设为display: block，让每款产品变成独立区块 - 每个
<tr>在小屏下渲染为一个带边框的卡片，内部用flex或grid横向排参数名和值（需额外 wrapper，因为原<td>已 block） - 测试 VoiceOver/TalkBack 朗读顺序：必须是“存储空间 → 基础版值 → 专业版值”，不是“基础版所有项 → 专业版所有项”
- 禁用
table-layout: fixed和固定width，否则小屏下文字被截或换行错乱
最易被忽略的点：价格数字必须单独包裹 <strong> 或加 class="price"，否则右对齐、等宽字体（font-feature-settings: "tnum"）、小数点对齐全失效——空格对齐是幻觉，复制进 Excel 就崩。
