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