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