必须用语义化表格结构保障可访问性：唯一包裹的、完整三要素（标题、表头、主体）、正确使用、、及headers关联，禁用aria-hidden遮蔽内容，响应式需保持dom语义不变。
<main></main> 必须存在且唯一，<table> 必须带 <code><caption></caption>、<thead>、<code><tbody>，否则报表对屏幕阅读器不可读、搜索引擎无法索引核心数据——这不是“优化项”，是语义骨架的底线。
<h3>为什么 <code><main></main> 缺失会让整张报表失效
数据可视化报表常被嵌在 <section></section> 或 <div> 里，但若没包裹在 <code><main></main> 中，屏幕阅读器会默认跳过“主内容区”识别逻辑，直接从导航或页脚开始朗读；搜索引擎也可能降权该页面的内容权重。
-
<main></main>只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<nav></nav>内 - 动态渲染的报表（如用 ECharts 加载后插入 DOM），需手动补上
<main></main>包裹，不能依赖 JS 框架自动注入 - 若报表是弹窗或 Tab 页内内容，仍需确保当前可见区域的报表 DOM 被
<main></main>包围——aria-hidden="true"的旧区域要同步移除<main></main>
<table> 不只是“画格子”，<code><caption></caption> 和 <scope></scope> 是可访问性的开关
纯视觉对齐用 <div> + CSS Grid 更合适；只要数据存在行列关系（比如“各地区 Q1–Q4 销售额”），就必须用 <code><table>，且三要素缺一不可：标题、表头区、主体区。
<ul><li>
<code><caption></caption> 必须紧贴 <table> 开始标签后，不能用 <code><h2></h2> 替代；内容要具体，如“2024年Q2华东区渠道销售明细”，而非“销售数据”
<th scope="col"> 用于列名（如“月份”“产品线”），<code><th scope="row"> 用于行名（如“北京仓”“上海仓”）；左上角单元格若同时是行列头，应拆成两个 <code><th> 并用 <code>id/headers 关联
<tbody> 看似无害，但某些旧版 Safari 和爬虫不会自动补全，JS 操作 <code>document.querySelectorAll('tr') 可能漏掉首行
响应式报表中，别用 overflow-x: auto 掩盖语义缺陷
横向滚动条在触屏设备上卡顿、打印时截断、读屏软件无法按逻辑遍历——问题根源不是“太宽”，而是没守住原始表格结构。
- 小屏下用
@media (max-width: 768px)+display: grid重排每行<tr> 为垂直卡片，但 DOM 中 <code><tr>、<code><th>、<code><td> 一个都不能删或合并 <li>每张卡片内用伪元素（<code>::before）注入列名，列名来源必须是原<th scope="col"> 的 <code>textContent，不能硬编码 - 避免用
aria-label给<td> 注释数值含义（如“销售额：¥1,234,567”），正确做法是让 <code><th scope="col"> 的文本本身具备语义（如直接写“Q2 销售额（万元）”） <p>最容易被忽略的是 <code><tfoot> 的缺失和 <code><colgroup></colgroup>的滥用：汇总行不放<tfoot>，会导致打印时每页都重复显示汇总；而用 <code><colgroup></colgroup>控制列宽却忽略其语义（如分组列逻辑），反而干扰辅助技术对数据维度的理解。
