库存列表必须用 <table> 而非 <div> 堆砌，因其天然支持行列语义、辅助技术可读、键盘导航连贯、JS 批量操作高效，且需规范使用 <thead>/<tbody>、scope 属性、<th> 与 <td>、带单位/状态标识的字段及响应式卡片流设计。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
直接用 <table> 做 ERP 库存列表，但不加 <code><thead> 和 <code><tbody>，等于把数据扔进黑盒——前端能看，后端难取，屏幕阅读器读不懂，JS 一操作就丢焦点。
<h3>为什么库存列表必须用 <code><table> 而不是 <code><div> 堆砌
<p>库存是强结构化二维数据：商品名、规格、当前库存、安全库存、仓库、状态、操作。它天然对应“行×列”语义。<code><div class="item"> 没有行列概念，JS 想批量获取“所有深圳仓的库存数”，就得遍历全部 DOM 再字符串匹配，慢且易错。
<ul><li>辅助技术（如 NVDA、VoiceOver）依赖 <code><table> 的语义推导上下文，<code><th scope="col"> 才能让用户知道“这列数字对应的是‘可用库存’”
<li>键盘 Tab 导航在 <code><table> 中默认按单元格跳转，逻辑连贯；<code><div> 列表里每个按钮都是独立焦点，20 行就是 60 次 Tab
<li>后续要加“点击表头排序”或“Ctrl+单击多选行”，<code><tbody> 是天然的数据作用域，不用再写 <code>document.querySelectorAll('.inventory-row')
<thead> 和 <code><tbody> 怎么写才不算摆设
<p>很多页面写了 <code><thead> 却把 <code><th> 写成 <code><td>，或漏掉 <code>scope 属性，结果语义全失效。
<thead> 必须只包一行 <code><tr>，里面每个列标题用 <code><th scope="col">，不能用 <code><td>
<li><code><tbody> 包所有数据行，每行 <code><tr>，单元格统一用 <code><td>（除非某单元格本身是汇总行，才用 <code><th scope="row">）
<li>操作列的按钮必须是 <code><button type="button" data-product-id="1024"></button>，不是 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="del(1024)">删除</a> —— 后者无法键盘聚焦，也不符合可访问性要求- 如果某列显示“充足/缺货”，别只靠颜色区分，加 aria-label：
<td aria-label="当前库存：82，低于安全库存50，状态：缺货">缺货</td>
库存列表里哪些字段必须带单位或状态标识
纯数字“82”在库存场景下毫无意义，用户必须立刻知道这是“82 件”还是“82 箱”，是否已冻结、是否含在途、是否被订单占用。
立即学习“前端免费学习笔记（深入）”；
- 库存数量列应写作：
<td>82 <span style="font-size:0.8em;color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b666;">件</span>
</td> 或更稳妥地用 data-unit="件" 供 JS 读取
- 状态列不能只写“正常”，要明确来源：
<td><span data-status="available">可用</span></td>、<td><span data-status="frozen">已冻结（订单https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bORD-7890）</span></td>
- 仓库字段建议加
data-warehouse-id="WH-SZ"，方便前端按仓库筛选、分组渲染，也避免中英文混排时 JS 字符串匹配失败
- 安全库存阈值若为 0，需显式显示“无预警”，而不是留空或写“-”，否则用户会误以为数据未加载
响应式断点下怎么保结构不崩
小屏强行横表会溢出、缩字、丢失操作按钮。硬塞 overflow-x: auto 只是掩盖问题。
- 优先用 CSS
@media (max-width: 768px) 把表格转为卡片流：<article class="inventory-card"></article>，每张卡内用 <dl>
<dt>商品名</dt>
<dd>XX手机</dd>
</dl> 模拟语义结构
- 操作按钮始终固定在卡片底部，不随滚动消失；禁用
position: sticky，它在 iOS Safari 上兼容性差
- 关键字段（如当前库存、仓库、状态）必须保留在小屏卡片首屏可见区，非关键字段（如入库时间、批次号）收进“展开详情”区域
- 不要用
display: none 隐藏整列，而应保留 DOM 结构并用 visibility: hidden + height: 0，否则屏幕阅读器仍会朗读被隐藏内容
真正难的不是画出一张能看的库存表，而是让每一行数据都自带上下文、可定位、可筛选、可审计。一个没加 scope 的 <th>，可能让视障仓管员连续三天找不到“北京仓”的库存数；一个没带 <code>data-warehouse-id 的单元格，会让前端导出 Excel 时把深圳仓和广州仓的货全混成一列。细节不是点缀，是库存可信度的最小单位。
<thead> 必须只包一行 <code><tr>，里面每个列标题用 <code><th scope="col">，不能用 <code><td>
<li><code><tbody> 包所有数据行，每行 <code><tr>，单元格统一用 <code><td>（除非某单元格本身是汇总行，才用 <code><th scope="row">）
<li>操作列的按钮必须是 <code><button type="button" data-product-id="1024"></button>，不是 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="del(1024)">删除</a> —— 后者无法键盘聚焦，也不符合可访问性要求<td aria-label="当前库存：82，低于安全库存50，状态：缺货">缺货</td>
库存列表里哪些字段必须带单位或状态标识
纯数字“82”在库存场景下毫无意义，用户必须立刻知道这是“82 件”还是“82 箱”，是否已冻结、是否含在途、是否被订单占用。
立即学习“前端免费学习笔记（深入）”；
- 库存数量列应写作：
<td>82 <span style="font-size:0.8em;color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b666;">件</span> </td>或更稳妥地用data-unit="件"供 JS 读取 - 状态列不能只写“正常”，要明确来源：
<td><span data-status="available">可用</span></td>、<td><span data-status="frozen">已冻结（订单https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bORD-7890）</span></td> - 仓库字段建议加
data-warehouse-id="WH-SZ"，方便前端按仓库筛选、分组渲染，也避免中英文混排时 JS 字符串匹配失败 - 安全库存阈值若为 0，需显式显示“无预警”，而不是留空或写“-”，否则用户会误以为数据未加载
响应式断点下怎么保结构不崩
小屏强行横表会溢出、缩字、丢失操作按钮。硬塞 overflow-x: auto 只是掩盖问题。
- 优先用 CSS
@media (max-width: 768px)把表格转为卡片流：<article class="inventory-card"></article>，每张卡内用<dl> <dt>商品名</dt> <dd>XX手机</dd> </dl>模拟语义结构 - 操作按钮始终固定在卡片底部，不随滚动消失；禁用
position: sticky，它在 iOS Safari 上兼容性差 - 关键字段（如当前库存、仓库、状态）必须保留在小屏卡片首屏可见区，非关键字段（如入库时间、批次号）收进“展开详情”区域
- 不要用
display: none隐藏整列，而应保留 DOM 结构并用visibility: hidden+height: 0，否则屏幕阅读器仍会朗读被隐藏内容
真正难的不是画出一张能看的库存表，而是让每一行数据都自带上下文、可定位、可筛选、可审计。一个没加 scope 的 <th>，可能让视障仓管员连续三天找不到“北京仓”的库存数；一个没带 <code>data-warehouse-id 的单元格，会让前端导出 Excel 时把深圳仓和广州仓的货全混成一列。细节不是点缀，是库存可信度的最小单位。
