商品规格表应使用语义化两列表格结构：包裹多个，每行含（属性名）和（值），禁止单独使用或滥用；多值用分隔并配CSS；必须设置border、padding及table-layout确保渲染正确。

用 做商品规格表，先想清楚“谁是行”

商品规格不是随便堆文字，而是有明确结构的二维信息：属性名（如“颜色”“尺寸”）是一列，对应值（如“黑色”“M”）是另一列。 的作用就是定义一行——但这一行必须放在

里，且通常配合 不会渲染出任何内容。

常见错误是把每个规格项写成孤立的

，却忘了外层

（表头单元格）或	（普通单元格）使用。单独写

和内部

，结果页面空白或结构错乱。

• 正确结构：

  属性	值

• 如果只有单列数据（比如纯列表），
  更语义化，硬套 反而增加可访问性负担
  • 不要用
  模拟横向分割线或装饰性分隔——那是 CSS 的活

  两列表格最稳妥：用

  ，里面一个 …但会拉长表格，移动端体验差
  • 绝对不要用
换行——它破坏语义，且无法统一控制行高或对齐

  示例（简洁可控）：

  <td>
  <span class="spec-value">红</span> <span class="spec-value">蓝</span> <span class="spec-value">白</span>
  </td>

  CSS 必须跟上，否则

  什么也显不出来

  原生 HTML 表格默认有边距塌陷、无边框、文字挤在一起。光靠

  和

  标明属性，

  填值

  多数商品规格适合两列布局：左列是属性名（语义上属于表头），右列是具体值。这时每行一个

  + 一个

  ，既清晰又利于屏幕阅读器识别。
  品牌	Apple
  屏幕尺寸	6.7 英寸
  存储容量	256 GB
  默认加粗居中，视觉上自然区分属性与值；语义上也告诉辅助技术“这是描述性标题”
  避免全用
  ：那样所有单元格无区别，对读屏用户不友好
  不要给
  加 scope="row"（除非多行多列交叉表），简单规格表不需要

  多值规格（如“支持颜色：红、蓝、白”）怎么处理？

  遇到一个属性对应多个可选值时，别强行塞进单个

  用顿号隔开。这样不利于复制、样式控制和后续 JS 操作。
  • 方案一（推荐）：在
  内嵌
  或 ，用空格或逗号分隔，再靠 CSS 控制换行与间距
  方案二：拆成多行，重复属性名，例如：

  支持颜色

  红

  写完，用户看到的大概率是一坨紧贴的文字。
  • 至少加 border-collapse: collapse 到 ，消除默认单元格间距
  • 给

  和

  设 padding，否则文字贴边难读
  用 text-align: left 统一左对齐，
  默认居中反而割裂阅读流
  移动端务必设 width: 100% 和 table-layout: fixed，防表格横向溢出
  容易被忽略的是：没有设置
  的 border 或单元格 border，整个表格在多数浏览器里是“隐形”的——不是代码错了，是没画边框。
  
  生成HTML格式PPT
  从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
  下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！