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