库存盘点清单用HTML表格实现,核心结构为<table>搭配<thead><tbody><tr><th><td>标签,包含序号、商品编码、名称、实盘数量、账面数量、差异、备注七列,支持边框样式与JS交互增强实用性。

用 HTML 表格标签制作库存盘点清单,核心是用 <table> 搭建结构,配合 <thead>、<tbody>、<tr>、<th> 和 <td> 清晰呈现商品编号、名称、实盘数量、账面数量、差异、备注等关键字段。
基础结构:表头与数据行分明
库存盘点表需要区分标题栏(列名)和实际数据。用 <thead> 包裹表头行,<tbody> 包裹所有盘点记录,语义清晰,也方便后续加样式或 JS 处理。
-
<th>放在<thead>里,表示“列标题”,默认居中加粗 -
<td>放在<tbody>的每行中,表示“具体数值” - 每行用
<tr>包裹,避免漏掉结束标签
常用列字段建议(直接可用)
一个实用的盘点清单至少包含以下 6 列,顺序按操作习惯排列:
- 序号(自增编号,便于核对)
- 商品编码(唯一标识,如 SKU1001)
- 商品名称(简明准确,如“无线蓝牙耳机-白”)
- 实盘数量(手写或扫码录入的实际清点数)
- 账面数量(系统/台账当前记录的数量)
- 差异(实盘减账面,可留空由 JS 计算,或手动填“+2”“-1”)
- 备注(如“包装破损”“待复盘”“已调账”)
带边框和基础样式的简洁写法
仅用 HTML 不加 CSS 也能让表格可读。添加 border="1" 和 cellpadding="6" 提升可读性,适合内部快速打印或邮件发送:
立即学习“前端免费学习笔记(深入)”;
<table border="1" cellpadding="6"><thead>
<tr>
<th>序号</th>
<th>商品编码</th>
<th>商品名称</th>
<th>实盘数量</th>
<th>账面数量</th>
<th>差异</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SKU1001</td>
<td>无线蓝牙耳机-白</td>
<td>12</td>
<td>15</td>
<td>-3</td>
<td>缺3个,疑似发货未记账</td>
</tr>
</tbody>
</table>
小提示:提升实用性的小技巧
- 给表格加
id="inventory-table",方便用 JavaScript 动态计算差异、高亮负数、导出 Excel - 差异列中,用
<span style="color:red">-3</span>突出短缺,style="color:green">+2</span>标识盈余 - 如需打印,加
<style>@media print { table { font-size:12px; } }</style>控制纸张适配 - 避免用
<colspan>或<rowspan>合并单元格——盘点表讲究逐行可查,合并反而影响识别



















