语义化html表格应使用定义列头、承载数据，确保价格表结构清晰、可访问、可导出。
用 <table> 写价格表，别套样式再写结构
<p>直接用语义化 HTML 表格标记价格信息，比用 <code><div> 拼表格更可靠、更易读、更利于屏幕阅读器识别。关键不是“怎么画格子”，而是“哪部分是标题行、哪列是商品名、哪列是价格”。
<p>常见错误：把价格表写成三列 <code><div class="col"> 堆砌，结果无法被爬虫理解、打印时错乱、键盘导航失效。
<ul><li><code><thead> 包住 <code><tr> + <code><th>，声明列含义（如“商品”“规格”“单价”）
<li>每行商品用 <code><tbody><tr>，单元格统一用 <code><td>（不用 <code><th>）
<li>如果某商品有多个规格，不要合并行（<code>rowspan），改用两行分别写，避免逻辑混乱
<th> 和 <code><td> 的角色不能颠倒
<p>价格表里，“商品名称”“单位”“价格”这些是列头，必须用 <code><th>；具体数值（如“iPhone 15”“256GB”“¥7999”）全是数据，只能用 <code><td>。浏览器和辅助工具靠这个区分“这是标题”还是“这是内容”。
<p>错误示例：<code><tr>
<td>商品</td>
<td>价格</td>
</tr> —— 这会让读屏软件念成“商品，表格单元格；价格，表格单元格”，失去表头意义。
- 列头写在
<thead> 里，且每个 <code><th> 应带 <code>scope="col" 属性（显式声明作用域）
- 若某行需强调（如“促销款”），可用
<tr class="highlight">，但不要改用 <code><th> 替代 <code><td>
<li>价格数字建议加 <code><span></span> 包裹并设 class="price"，方便后续 CSS 对齐或加货币符号
价格数字对齐和单位处理要靠 HTML 结构，不是纯 CSS
右对齐价格看起来专业，但仅靠 text-align: right 不够——小数点会错位（比如 “¥99” 和 “¥1299.99”）。HTML 层面应让数字本身结构清晰，再配合 CSS 微调。
- 价格列所有
<td> 加 <code>class="price-col"，CSS 用 text-align: right + font-variant-numeric: tabular-nums（强制等宽数字）
- 货币符号（¥ / $）建议写在 HTML 里（
<td>¥7,999.00</td>），而非用伪元素添加，否则复制粘贴会丢符号
- 千分位逗号由后端或 JS 格式化好再塞进
<td>，不要靠 CSS 的 <code>content 生成，否则不利于数据提取
响应式价格表别删表格，要用 <table> 的原生能力降级
<p>手机上看多列价格表确实挤，但删掉 <code><table> 改用卡片流，等于放弃表格语义。正确做法是保留 <code><table>，用 CSS 让它在小屏下纵向堆叠，同时保持行列关系可追溯。
<ul><li>给 <code><table> 加 <code>class="responsive-table"，媒体查询内用 display: block + overflow-x: auto 实现横向滚动（最简可靠）
- 更进一步：用
<tbody> 每行的 <code><td> 添加 <code>data-label 属性（如 data-label="商品"），小屏时用 CSS ::before 显示标签，模拟“键值对”布局
- 禁用
table-layout: fixed 除非你精确控制了每列宽度，否则容易导致文字截断或列宽崩塌
真正难的不是写出能显示的表格，而是让每一行价格在导出 Excel、被搜索引擎抓取、被用户复制比价时，依然保持“商品→规格→价格”的映射关系不丢失。
<th> 和 <code><td> 的角色不能颠倒
<p>价格表里，“商品名称”“单位”“价格”这些是列头，必须用 <code><th>；具体数值（如“iPhone 15”“256GB”“¥7999”）全是数据，只能用 <code><td>。浏览器和辅助工具靠这个区分“这是标题”还是“这是内容”。
<p>错误示例：<code><tr>
<td>商品</td>
<td>价格</td>
</tr> —— 这会让读屏软件念成“商品，表格单元格；价格，表格单元格”，失去表头意义。
- 列头写在
<thead> 里，且每个 <code><th> 应带 <code>scope="col"属性（显式声明作用域） - 若某行需强调（如“促销款”），可用
<tr class="highlight">，但不要改用 <code><th> 替代 <code><td> <li>价格数字建议加 <code><span></span>包裹并设class="price"，方便后续 CSS 对齐或加货币符号 - 价格列所有
<td> 加 <code>class="price-col"，CSS 用text-align: right+font-variant-numeric: tabular-nums（强制等宽数字） - 货币符号（¥ / $）建议写在 HTML 里（
<td>¥7,999.00</td>），而非用伪元素添加，否则复制粘贴会丢符号 - 千分位逗号由后端或 JS 格式化好再塞进
<td>，不要靠 CSS 的 <code>content生成，否则不利于数据提取响应式价格表别删表格，要用
<table> 的原生能力降级 <p>手机上看多列价格表确实挤，但删掉 <code><table> 改用卡片流，等于放弃表格语义。正确做法是保留 <code><table>，用 CSS 让它在小屏下纵向堆叠，同时保持行列关系可追溯。 <ul><li>给 <code><table> 加 <code>class="responsive-table"，媒体查询内用display: block+overflow-x: auto实现横向滚动（最简可靠） - 更进一步：用
<tbody> 每行的 <code><td> 添加 <code>data-label属性（如data-label="商品"），小屏时用 CSS::before显示标签，模拟“键值对”布局 - 禁用
table-layout: fixed除非你精确控制了每列宽度，否则容易导致文字截断或列宽崩塌
价格数字对齐和单位处理要靠 HTML 结构，不是纯 CSS
右对齐价格看起来专业，但仅靠 text-align: right 不够——小数点会错位（比如 “¥99” 和 “¥1299.99”）。HTML 层面应让数字本身结构清晰，再配合 CSS 微调。
真正难的不是写出能显示的表格，而是让每一行价格在导出 Excel、被搜索引擎抓取、被用户复制比价时，依然保持“商品→规格→价格”的映射关系不丢失。
