资产负债表HTML结构核心是语义对齐：资产与负债权益分设独立<tbody>，每行用<th scope="row">明确科目，金额用<td class="amount">右对齐并千分位格式化，禁用合并单元格和视觉模拟，确保可访问性、打印适配与数据提取。
用 <table> 做资产负债表，核心是「语义对齐」而不是「画格子」
HTML 表格不是 Excel，强行套用合并单元格、空行、居中对齐来“模拟报表样式”，很快会失控。资产负债表本质是两组平行结构：资产（按流动性降序）和负债与所有者权益（按到期顺序）。<thead> 和 <tbody> 必须分清逻辑区块，而不是视觉分组。
常见错误是把“资产总计”和“负债和所有者权益总计”塞进同一行，导致语义断裂；或者用 <colspan> 跨列做标题，破坏可访问性和打印适配。
- 资产侧用一个
<tbody>，每行一个科目，<tr>内只含<th scope="row">（科目名）和<td>（金额） - 负债与权益侧另起一个
<tbody>，同样结构，不混用<th>和<td>角色 - “总计”行必须独立，且用
<th scope="row">标明是“资产总计”，不能只靠文字加粗或空格缩进
<th scope="row"> 不是装饰，它决定屏幕阅读器怎么读
很多开发者把 <th> 当成“加粗单元格”，结果表格被读作“货币资金，空白，应收账款，空白……”，因为没声明 scope。资产负债表每一行代表一个会计科目，必须明确告诉辅助技术：“这一行的标题是‘货币资金’，后面数字属于它”。
错误写法：
<th>货币资金</th><td>120000</td></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>正确写法：<code><th scope="row">货币资金</th><td>120000</td>
-
scope="row"是底线要求，别省略 - 不要用
<th>包裹金额列——金额是数据，不是标题 - 如果表格横向有多个期间（如“2023年末”“2024年末”），列标题才用
<th scope="col">
金额右对齐 + 千分位，纯 CSS 就够，别动 HTML 结构
数值对齐和格式化是展示层职责，不是结构层任务。在 <td> 里塞空格、 或用 <div style="text-align:right"> 套壳，只会让数据提取、复制粘贴、后续转 JSON 失败。
直接给金额单元格加 class：
<td class="amount">120000</td>
CSS 写死：
.amount {
text-align: right;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
- 千分位用 JavaScript 格式化后写入
<td>，例如new Intl.NumberFormat().format(120000)→"120,000" - 不要用 CSS
counter-increment或伪元素生成逗号——那不是真实文本，无法选中、复制、爬取 - 负数金额（如“应付账款”为负？不，那是会计方向问题；实际应单独设“减项”行，如“坏账准备”，而非在数字前加负号混淆语义）
打印时错位、手机上挤成一团？检查 <colgroup> 和最小宽度
资产负债表左右两栏（资产 vs 负债与权益）在窄屏或打印时容易重叠或换行，根本原因是浏览器对表格列宽的自动计算失效。不靠 JS 动态调整，用原生 HTML/CSS 就能稳住：
- 显式声明列结构：
<colgroup><col width="200"><col width="120"></colgroup>，第一列科目名，第二列金额 - 给科目名列设
min-width: 180px，防压缩；金额列设width: 1%+white-space: nowrap防断开 - 避免在
<th>或<td>上写width行内样式——不可继承、难维护 - 打印媒体查询里加
@media print { table { page-break-inside: avoid; } }，防止跨页断开“合计”行
复杂点在于“流动资产合计”这类小计行需要视觉缩进但又不能破坏 scope="row" 语义——用 padding-left 或 text-indent，别用额外 <span> 套壳。
