报价单用合理，因其天然具行列对齐、表头、数值对齐等二维数据特征；关键在语义正确：必须用及scope="col"等标签，而非仅布局页面。
表格布局做报价单，现在不推荐——<table> 本意是展示二维数据，不是控制页面结构；用它做布局会导致语义混乱、响应式困难、可访问性差，且现代 CSS（如 <code>grid 和 flex）已完全胜任。
为什么报价单仍常见 <table>？
<p>因为报价单天然符合「行列对齐+表头+数值对齐」的数据特征：项目名、数量、单价、小计、税率等字段本身就是表格语义。这时候用 <code><table> 不仅合理，而且正确。
<p>关键区别在于：不是「用 table 布局页面」，而是「用 table 表达报价数据」。</p>
<ul><li>✅ 正确用法：<code><table> 包裹报价明细（含 <code><thead>、<code><tbody>、<code><th>、<code><td>）
<li>❌ 错误用法：<code><table> 套 <code><tr><td> 来摆 logo、导航栏、页脚
<h3><code><table> 报价单必须包含的语义标签
<p>只写 <code><table><tr><td> 是裸表，屏幕阅读器和搜索引擎无法理解哪行是标题、哪列是金额。必须补全语义结构：
<ul><li><code><thead> 包住表头行（<code><tr>），每个列名用 <code><th scope="col">（不是 <code><td>）
<li><code><tbody> 包住所有明细行，金额列建议加 <code>class="amount" 方便样式/脚本定位
<tfoot> 内（而非最后一行 <code><tr>），语义更清晰
<li>避免合并单元格（<code>rowspan/colspan），除非真有跨行描述（如“服务费”下分三项）| 项目 | 数量 | 单价（元） | 小计（元） |
|---|---|---|---|
| 前端开发 | 40 | 800 | 32000 |
| 合计 | 32000 | ||
金额右对齐 + 千分位，别靠空格或
手动加空格对齐在不同字体下会错位， 还影响复制粘贴。正确做法是 CSS 控制：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 金额列统一加
class="amount"，然后用text-align: right - 千分位用 JS 格式化（后端吐出数字，前端用
toLocaleString()）：(123456.78).toLocaleString('zh-CN', { minimumFractionDigits: 2 })→"123,456.78" - 避免在 HTML 里写
<td>123,456.78</td>—— 数值应保持原始数字，格式交给 CSS/JS
打印时表格断页错乱怎么办
浏览器打印默认可能在行中间断页，导致表头消失、金额孤立。加这几行 CSS 能显著改善：
-
table { page-break-inside: avoid; }—— 整个表格尽量不拆分 -
thead { display: table-header-group; }—— 打印时每页自动重复表头（Chrome/Firefox 支持） -
tr { page-break-inside: avoid; page-break-after: auto; }—— 防止明细行被截断 - 慎用
position: fixed或transform，它们会让打印内容消失
实际效果取决于浏览器版本，务必在 Chrome 和 Edge 的打印预览中实测。
最易被忽略的是 <tfoot> —— 很多人直接把合计写在 <code><tbody> 最后一行，导致打印时它可能被带到下一页顶部，而前面明细没跟上。用 <code><tfoot> 并配合 <code>page-break-inside: avoid 才能真正稳住合计位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
