用html表格写报价表应严格遵循语义化规范：用结构，定义列头，价格列统一用并配合css右对齐与等宽数字字体，禁用rowspan/colspan和空格对齐，导出excel需加utf-8 bom，移动端优化须设table-layout:fixed及列宽。
用 HTML 表格写报价表，别碰 table 以外的“高级布局”
纯静态 index.html 做产品报价表，table 是最直接、兼容性最好、搜索引擎也认的方式。别一上来就想着用 div + CSS Grid 或 Flex 模拟表格——语义错、可访问性差、打印时容易错行，还可能被屏幕阅读器读成“一堆无关联的盒子”。
实操建议：
- 用
<table> 包裹整张表，<code><thead> 放表头（<code><th>），<code><tbody> 放数据行（<code><td>） <li>每列加 <code>scope="col"到<th>，方便辅助技术识别列关系 <li>价格列统一用 <code><td class="price">¥128.00</td>，后续加 CSS 或 JS 也好定位 - 避免合并单元格（
rowspan/colspan），除非真有“规格组”这类不可拆分逻辑，否则导出 Excel 或打印时易错位 - 给价格列加类名，比如
<td class="price">¥128.00</td> - 在
<style></style>里写：.price { text-align: right; font-family: "Consolas", "SFMono-Regular", monospace; } - 如果要小数点对齐（如 ¥99.00 和 ¥1280.00），用
tabular-nums：.price { font-variant-numeric: tabular-nums; }（注意 Safari 旧版不支持，但价格列本身对齐影响不大） - 别用
- 如果用
SheetJS（xlsx库），生成文件时显式指定type: "array"并用new Blob([s2ab(wbout)], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}) - 如果手动生成 CSV（简单场景够用），必须在字符串开头插入 UTF-8 BOM：
const bom = "\uFEFF";\nconst csv = bom + "产品名称,单价,库存\n" + "...";
- 不要依赖
Content-Type: text/csv;charset=utf-8—— Excel 完全不看这个 header，只认 BOM 或文件扩展名 - 测试时务必用 Windows 上的 Excel 打开，Mac Numbers 或在线表格工具对编码宽容，会掩盖问题
- 给
<table> 加内联样式或 CSS 类：<pre class="brush:php;toolbar:false;">table { table-layout: fixed; width: 100%; }</pre> <li>给每列 <code><th> 或第一行 <code><td> 设明确宽度，比如 <code><th style="width: 40%">产品名称</th> - 删掉所有未闭合的
<td> 或嵌套过深的标签（如 <code><td><div><p>xxx</p></div></td>），这些会让 fixed 布局失效 - 如果列太多横向滚动，用
overflow-x: auto包一层<div>，别用 <code>min-width死撑 表格语义和渲染性能是隐形门槛，改一行table-layout或加一个 BOM，往往比重写逻辑更快解决问题。
价格数字要对齐，用 CSS 控制比空格更可靠
很多人直接在 HTML 里敲 <td>¥ 99.00</td> 试图右对齐，结果换字体/缩放就乱。数字对齐必须靠 CSS。
实操建议：
导出 Excel 时中文乱码？关键在 Content-Type 和 BOM
用户点击“导出为 Excel”，你用 JS 触发下载，但打开是乱码——大概率是 UTF-8 文件没带 BOM，Excel 默认当 ANSI 解码。
实操建议：
移动端查看报价表卡顿？不是 JS 慢，是表格没设 table-layout: fixed
几十行报价表在手机上滑动卡顿，检查发现不是 JS 在跑，而是浏览器反复重排表格——因为默认 table-layout: auto 要遍历所有内容算列宽。
实操建议：
