定价表必须用而非div布局，因其语义正确、打印不折行、屏幕阅读器可读；需写全、每个加scope="col"；价格列用css右对齐和等宽字体，移动端用容器包裹实现横向滚动。

用 <table> 做定价表最稳妥，别碰 <code>div + CSS Grid 模拟表格——语义错、打印错行、屏幕阅读器读不懂，纯静态场景下没理由绕开原生表格。

为什么定价表必须用 <table> 而不是 <code>div 布局

定价表本质是行列明确的结构化数据：产品名、功能项、价格、是否包含，每一列有固定含义，每行代表一个方案。浏览器和辅助技术（如屏幕阅读器）靠 <table> 的语义自动建立行列关联；<code>div 堆出来的“表格”只是视觉像，DOM 里全是扁平盒子，无法被正确解析为“第2列是价格”“第3行是企业版”。打印时也常出现跨页断行错位，因为 div 没有原生分页控制能力。

常见错误现象：

• 用户用读屏软件访问，听到的是“盒子、盒子、盒子”，而不是“专业版，价格列，¥199.00”
• Chrome 打印预览中，某一行被截成两页，第二页只剩价格没产品名
• 导出 Excel 时，所有内容挤在 A1 单元格里——因为没 <table> 结构，JS 库无法识别行列关系 <h3><code><thead> 和 <code><tbody> 必须写全，<code>scope="col" 不能省

  只写 <table> <tr> <th>基础版</th> <th>专业版</th> </tr> <tr> <td>✓</td> <td>✓</td> </tr> </table> 是无效语义。缺少 <thead> 和 <code><tbody>，辅助技术无法区分表头与数据；不加 <code>scope="col"，屏幕阅读器不知道这个 <th> 是管整列还是仅当前单元格。 <p>实操建议：</p> <ul><li>表头行必须包在 <code><thead> 里，数据行必须包在 <code><tbody> 里 <li>每个 <code><th> 都要带 <code>scope="col"，例如 <th scope="col">专业版</th>

• 如果某列需要“合并标题”（比如“服务支持”下分“响应时间”“SLA”），用 <th scope="rowgroup"> + 嵌套 <code><tbody>，而非 <code>colspan

  价格列右对齐和小数点对齐，靠 CSS 不靠空格

  很多人在 HTML 里写 <td>   ¥99.00</td> 试图右对齐，结果换字体或缩放后全乱。空格不可靠，且复制粘贴会丢空格或引入全角字符，导致 Excel 导入失败。

  

  HTML汇报生成器

  🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

  下载

  正确做法：

  • 给价格列统一加 class，例如 <td class="price">¥128.00</td>
  • CSS 写死对齐和等宽字体：.price { text-align: right; font-family: "Consolas", "SFMono-Regular", monospace; }
  • 要小数点严格对齐（¥99.00 和 ¥1280.00 底部对齐），加 font-variant-numeric: tabular-nums; ——注意 Safari 14 及更早版本不支持，但价格列本身对齐误差影响不大
  • 禁用 text-align: center 给价格列——用户扫视时，右对齐比居中更快定位数值大小

  移动端窄屏下横向滚动必须用容器包裹，不能直接设 <table> 样式 <p><code><table style="overflow-x: auto"> 完全无效，因为 <code><table> 默认是 inline-table 行为，不触发块级滚动。用户滑动不了，只能左右拖拽整个页面。 <p>实操方案：</p> <ul><li>用 <code><div class="table-container"> 包住整个 <code><table> <li>CSS 必须写两处：<code>.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } 和 .table-container table { min-width: 600px; }

• min-width 值要根据实际列数估算（一般 4 列起步设 600px），太小不触发滚动，太大导致小屏用户要拖很久
• 不要用 JS 动态切换为垂直卡片——“简单定价表”需求下，这是过度设计，反而增加首屏加载和逻辑复杂度

真正容易被忽略的点是 UTF-8 BOM：用户点击“导出 Excel”，打开乱码，八成是因为生成的 CSV 或 HTML 文件没带 BOM 头，Excel 默认按 ANSI 解码。哪怕你 CSS 写得再准，导出环节卡在这一步，整个定价表就失去业务价值。