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