用标签是最稳妥、语义最清晰的方式——只要数据是二维结构（如“商品名｜规格｜单价｜库存”），就应直接使用而非div或grid模拟，因其天然支持无障碍访问、打印、排序与导出。
直接用 <table> 标签是最稳妥、语义最清晰的方式——只要数据是二维结构（比如“商品名｜规格｜单价｜库存”），就别绕弯子用 <code>div 或 grid 模拟表格。
为什么不用 CSS Grid 或 Flexbox 画价格表
很多人想“现代化”，结果把价格表写成一堆 div 套 div，再用 display: grid 对齐。问题来了：屏幕阅读器读不出行列关系，打印时容易断行，排序、导出 Excel 也得额外写逻辑。而 <table> 天然支持 <code>scope、headers、caption，浏览器和辅助工具一读就懂。
<th scope="col"> 明确告诉读屏软件“这一列所有 <code><td> 都属于‘单价’列” <li>没有 <code><thead> 和 <code><tbody>，CSS 里用 <code>tbody tr:nth-child(even)做斑马纹会失效- 用
grid实现的“表格”无法被document.querySelectorAll('table tr')正常捕获，后续 JS 操作（比如按价格排序）反而更麻烦 <table>：整个容器，别加 <code>border="1"这种过时属性-
<caption></caption>：放在<table> 开头，比如 <code><caption>2026 年主力机型官方售价表</caption>，对 SEO 和无障碍都关键 <thead> 包裹一行 <code><tr>，里面全是 <code><th>；每个 <code><th> 加 <code>scope="col"<tbody> 包裹所有数据行，每行 <code><tr> 里用 <code><td>，数值类单元格建议加 <code>aria-label（如<td aria-label="价格：¥3999">¥3999</td>）colspan 和 rowspan 在价格表里的实际风险
价格表里最容易滥用
colspan的地方是“套餐组合”或“限时优惠”横跨多列的标题行。但要注意：- 一旦用了
colspan="3"，后续所有<tr> 必须严格保持列数一致，否则表格渲染错位，且校验工具（如 W3C Validator）会报错 <li> <code>rowspan在“同一型号多配置”场景看似方便（让“iPhone 15”纵向占三行），但会导致 JS 动态插入新行时逻辑复杂化，排序脚本极易出 bug - 如果只是想视觉上合并，优先考虑 CSS：给相邻
<td> 设相同 <code>background和border-bottom: none，比改结构更安全移动端价格表不溢出的最小可行方案
价格表列一多，手机上必然横向滚动。与其强行隐藏列或转为卡片流，不如用最简方式保底线：
- 给
<table> 外层套一个 <code><div style="overflow-x: auto;">，这是兼容性最好、行为最可控的做法 <li>避免在 <code><td> 里写长文本（如“支持 Wi-Fi 6E + 蓝牙 5.3 + NFC 全功能”），用缩写+<code>title属性（<td title="Wi-Fi 6E / BT5.3 / NFC">全连接</td>） - 不要依赖
table-layout: fixed强制等宽——价格数字长度差异大，固定布局会让“¥99”和“¥12,999”挤在同一列，反而降低可读性
真正难的不是写出一个能显示的表格，而是让每一行数据在语音、打印、导出、排序、缩放时都不丢上下文。从
<caption></caption>开始写，比后期补aria属性省十倍力气。 - 给
- 一旦用了
价格表必须包含的 HTML 结构元素
一个可访问、可维护、能被爬虫和工具识别的价格表，至少要有这四层嵌套：
