用做商品参数表最稳妥，因其原生支持、语义清晰、屏幕阅读器友好；须每行一个参数、禁用嵌套表格、合理分组、固定布局适配移动端、拆分多规格、添加caption和scope属性、规范数据结构。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

用 <table> 做商品参数表最稳妥<p>浏览器原生支持、语义清晰、屏幕阅读器友好，比用 <code><div> 模拟表格更可靠。别被“响应式难”吓住，先写对结构，再加适配。<p>常见错误是把所有参数塞进一个大单元格，比如：<code><td>CPU：Intel i7-12700K / 主频：3.6GHz / 核心数：12</td> —— 这等于放弃表格的可读性和可维护性。

• 每行一个参数项：<tr> <th>CPU</th> <td>Intel i7-12700K</td> </tr>
• <th> 仅用于表头（参数名），不要用在数据列<li>避免嵌套表格，尤其别在 <code><td> 里再套 <code><table><li>如果参数分组（如“性能参数”“接口参数”），用 <code><tbody> + <code><caption></caption> 或带 class 的 <tr> 区分，别靠空行或字体加粗<h3>移动端参数表横向滚动要手动控制</h3> <p>直接给 <code><table> 加 <code>overflow-x: auto 很容易失效——因为默认 table-layout 是 auto，列宽由内容撑开，父容器无法截断。

  必须显式设为 fixed，并限制列宽：

  立即学习“前端免费学习笔记（深入）”；

  <style>
  .param-table {
    display: block;
    overflow-x: auto;
  }
  .param-table table {
    table-layout: fixed;
    width: 100%;
  }
  .param-table th,
  .param-table td {
    width: 120px; /* 或用 %，但需总和 ≤100% */
    word-break: break-word;
  }
  </style>
  <div class="param-table">
    <table>...</table>
  </div>

  • 只对包裹容器设 overflow-x: auto，不是对 <table> 本身<li> <code>table-layout: fixed 后，<col> 或第一行 <th>/</th> <td> 的宽度才生效<li>避免在 <code><td> 里放长链接或未折行中文（如“支持Wi-Fi6E双频并发千兆无线传输”），加 <code>word-break: break-word

    多规格参数（如颜色/尺寸）别硬塞进同一张表

    把“颜色：黑色、白色、蓝色”和“尺寸：S/M/L/XL”混在主参数表里，会破坏语义，也难做交互筛选。

    正确做法是拆开：

    • 主 <table> 只放固定属性（品牌、型号、重量、电池容量等）<li>规格选择用 <code><fieldset>+<legend></legend> </fieldset> + <input type="radio"> 或按钮组，例如：<legend>颜色</legend> <label><input type="radio" name="color" value="black"> 黑色</label>
    • 如果需动态展示对应参数（如“黑色版重185g，白色版重182g”），用 JS 切换 data-* 属性，而不是重复渲染整张表

    无障碍与 SEO 容易漏掉的点

    参数表不是纯装饰，搜索引擎和读屏软件会解析它。漏掉关键标记，等于主动放弃这部分流量和可用性。

    • 必须加 <caption></caption>，比如：<caption>XX手机详细参数对照表</caption>，不可省略
    • 如果表头跨行（如“摄像头”下分“前置”“后置”），用 scope="col" 或 scope="row" 明确归属，别只靠视觉对齐
    • 避免用 aria-label 覆盖整个表格——它会覆盖掉内部 <th> 的语义，应优先用原生标签<li>数值类参数（如“续航：12小时”）建议补 <code>data-value="12"，方便后续排序或筛选脚本提取

    参数表真正的难点不在写法，而在数据结构是否干净。一个“网络制式”字段里混着“5G：NSA/SAN；4G：LTE-FDD/TDD”，就注定后期改起来痛苦。先理清字段边界，再动代码。