是语义最准、兼容最佳的价格表方案，需用定义标题、组织数据，价格列用或class右对齐，原价用，外层div加overflow-x:auto适配移动端。
用 <table> 写价格表，但别套样式框架
<p>纯 HTML 价格表不需要 CSS 框架或 JS，<code><table> 仍是语义最准确、兼容性最好的选择。浏览器默认样式虽简陋，但结构清晰、屏幕阅读器友好，适合基础展示场景。
<p>常见错误是强行用 <code><div> + <code>display: grid 模拟表格——这会让数据失去行列语义，导出为 CSV 或打印时容易错乱。
<thead> 包住标题行，<code><th> 用于列名（自动加粗居中）
<li><code><tbody> 包住所有价格数据行，每行用 <code><tr>，单元格用 <code><td>
<li>避免在 <code><th> 里硬塞 <code>style="text-align: left" ——先保证结构正确，再考虑视觉微调
价格数字对齐要靠 text-align: right，不是空格或
价格列右对齐是可读性刚需，尤其当有小数位（如 ¥199.00 和 ¥29.9）时。手动加空格或 不仅难维护，还会破坏复制粘贴和自动化处理。
正确做法是在 CSS 中单独控制价格列：
<style>
.price-col { text-align: right; }
</style><td class="price-col">¥299.00</td>
如果不想写 CSS，也可用 <col> 标签提前声明对齐方式：
<colgroup>
<col>
<col class="price-col">
<col class="price-col">
</colgroup>
“原价/折后价”这类对比字段，用 <del></del> 而不是 <span style="text-decoration: line-through"></span>
<del></del> 是语义化标签，表示内容已被删除但仍具参考价值——正好对应“原价已不适用，现价为准”的业务逻辑。它自带删除线样式，且对辅助技术更友好。
- ✅ 正确：
<del>¥399.00</del> <strong>¥249.00</strong>
- ❌ 避免：
<span style="text-decoration: line-through">¥399.00</span> <span>¥249.00</span>
- 注意：不要用
<s></s> ——它只表示“不再准确”，不强调“曾有效”，语义弱于 <del></del>
移动端窄屏下表格横向滚动比强行换行更可靠
价格表列数稍多（比如含“产品名｜原价｜折后价｜节省｜操作”5 列）时，在手机上强行压缩会导致文字挤成一团、点击区域变小。用 overflow-x: auto 包一层是最轻量的解法。
只需给 <table> 外层加个容器：
<pre class="brush:php;toolbar:false;"><div style="overflow-x: auto;">
<table>...</table>
</div></pre>
<p>这个方案不依赖 JS，所有现代浏览器都支持，而且用户能自主滑动查看完整列——比把“操作”按钮缩成图标、或把价格拆成两行更可控。</p>
<p>真正容易被忽略的是：表格本身不能设 <code>width: 100%，否则会撑满容器并隐藏滚动能力；让它自然宽度即可。
<thead> 包住标题行，<code><th> 用于列名（自动加粗居中）
<li><code><tbody> 包住所有价格数据行，每行用 <code><tr>，单元格用 <code><td>
<li>避免在 <code><th> 里硬塞 <code>style="text-align: left" ——先保证结构正确，再考虑视觉微调
价格数字对齐要靠 text-align: right，不是空格或
价格列右对齐是可读性刚需，尤其当有小数位（如 ¥199.00 和 ¥29.9）时。手动加空格或 不仅难维护，还会破坏复制粘贴和自动化处理。
正确做法是在 CSS 中单独控制价格列：
<style>
.price-col { text-align: right; }
</style><td class="price-col">¥299.00</td>
如果不想写 CSS，也可用 <col> 标签提前声明对齐方式：
<colgroup> <col> <col class="price-col"> <col class="price-col"> </colgroup>
“原价/折后价”这类对比字段，用 <del></del> 而不是 <span style="text-decoration: line-through"></span>
<del></del> 是语义化标签，表示内容已被删除但仍具参考价值——正好对应“原价已不适用，现价为准”的业务逻辑。它自带删除线样式，且对辅助技术更友好。
- ✅ 正确：
<del>¥399.00</del> <strong>¥249.00</strong> - ❌ 避免：
<span style="text-decoration: line-through">¥399.00</span> <span>¥249.00</span> - 注意：不要用
<s></s>——它只表示“不再准确”，不强调“曾有效”，语义弱于<del></del>
移动端窄屏下表格横向滚动比强行换行更可靠
价格表列数稍多（比如含“产品名｜原价｜折后价｜节省｜操作”5 列）时，在手机上强行压缩会导致文字挤成一团、点击区域变小。用 overflow-x: auto 包一层是最轻量的解法。
只需给 <table> 外层加个容器：
<pre class="brush:php;toolbar:false;"><div style="overflow-x: auto;">
<table>...</table>
</div></pre>
<p>这个方案不依赖 JS，所有现代浏览器都支持，而且用户能自主滑动查看完整列——比把“操作”按钮缩成图标、或把价格拆成两行更可控。</p>
<p>真正容易被忽略的是：表格本身不能设 <code>width: 100%，否则会撑满容器并隐藏滚动能力；让它自然宽度即可。
