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