商品规格表应使用语义化两列表格结构：<table>包裹多个<tr>，每行含<th>（属性名）和<td>（值），禁止单独使用<tr>或滥用<br>；多值用<span>分隔并配CSS；必须设置border、padding及table-layout确保渲染正确。
用 <tr> 做商品规格表，先想清楚“谁是行”
商品规格不是随便堆文字，而是有明确结构的二维信息：属性名（如“颜色”“尺寸”）是一列，对应值（如“黑色”“M”）是另一列。<tr> 的作用就是定义一行——但这一行必须放在 <table> 里，且通常配合 <th>（表头单元格）或 <td>（普通单元格）使用。单独写 <tr> 不会渲染出任何内容。
常见错误是把每个规格项写成孤立的 <tr>，却忘了外层 <table> 和内部 <td>，结果页面空白或结构错乱。
- 正确结构：
<table><tr><th>属性</th><td>值</td></tr></table></li> <li>如果只有单列数据（比如纯列表），<code><ul>
更语义化，硬套<table>反而增加可访问性负担 - 不要用
<tr>模拟横向分割线或装饰性分隔——那是 CSS 的活
两列表格最稳妥：用 <th> 标明属性，<td> 填值
多数商品规格适合两列布局：左列是属性名（语义上属于表头），右列是具体值。这时每行一个 <tr>，里面一个 <th> + 一个 <td>，既清晰又利于屏幕阅读器识别。
<table>
<tr>
<th>品牌</th>
<td>Apple</td>
</tr>
<tr>
<th>屏幕尺寸</th>
<td>6.7 英寸</td>
</tr>
<tr>
<th>存储容量</th>
<td>256 GB</td>
</tr>
</table>
-
<th>默认加粗居中，视觉上自然区分属性与值；语义上也告诉辅助技术“这是描述性标题” - 避免全用
<td>：那样所有单元格无区别，对读屏用户不友好 - 不要给
<th>加scope="row"（除非多行多列交叉表），简单规格表不需要
多值规格（如“支持颜色：红、蓝、白”）怎么处理？
遇到一个属性对应多个可选值时，别强行塞进单个 <td> 用顿号隔开。这样不利于复制、样式控制和后续 JS 操作。
立即学习“前端免费学习笔记（深入）”；
- 方案一（推荐）：在
<td>内嵌<ul>或<span>，用空格或逗号分隔，再靠 CSS 控制换行与间距 - 方案二：拆成多行，重复属性名，例如：
<tr><th rowspan="3">支持颜色</th><td>红</td></tr>…但会拉长表格，移动端体验差 - 绝对不要用
<br>换行——它破坏语义，且无法统一控制行高或对齐
示例（简洁可控）：
<td><span class="spec-value">红</span> <span class="spec-value">蓝</span> <span class="spec-value">白</span></td>
CSS 必须跟上，否则 <tr> 什么也显不出来
原生 HTML 表格默认有边距塌陷、无边框、文字挤在一起。光靠 <tr> 和 <td> 写完，用户看到的大概率是一坨紧贴的文字。
- 至少加
border-collapse: collapse到<table>，消除默认单元格间距 - 给
<th>和<td>设padding，否则文字贴边难读 - 用
text-align: left统一左对齐，<th>默认居中反而割裂阅读流 - 移动端务必设
width: 100%和table-layout: fixed，防表格横向溢出
容易被忽略的是：没有设置 <table> 的 border 或单元格 border，整个表格在多数浏览器里是“隐形”的——不是代码错了，是没画边框。
