HTML表格可读性差主因是结构语义模糊、嵌套混乱、缺乏逻辑分层；改善关键在于用thead/tbody/tfoot划分区块、th加scope属性明确作用范围、caption定义官方标题。
HTML表格可读性差，90%不是因为CSS没写好，而是结构本身语义模糊、嵌套混乱、缺乏逻辑分层。重构重点不在“怎么加样式”，而在“怎么组织标签”。
用 thead、tbody、tfoot 明确划分表格逻辑区块
浏览器和屏幕阅读器会把 thead 里的 <th> 当作所有数据行的列定义，把 <code>tfoot 当作汇总信息——这是原生支持的语义锚点。不用它们，就等于把“标题”“正文”“脚注”全塞进一堆 <tr> 里，靠CSS硬区分。
<ul>
<li>必须把所有表头行包进 <code>thead，哪怕只有一行
tbody，不要省略（即使只有一个 <tr>）
<li>如果有总计、平均值等汇总行，用 <code>tfoot 包裹，它会在渲染时自动移到底部，且支持打印分页重复tbody 里插 <th> 做“分组标题”——那是 <code><section></section> 或带 scope 的 <th> 的事
<h3>给 <code><th> 加 <code>scope 属性，明确表头作用范围
仅靠位置推断“第1列对应哪一列数据”对机器和残障用户是不可靠的。比如一个横向分组表头中，顶层 <th colspan="2"> 下面有两个子 <code><th>，不声明 <code>scope，屏幕阅读器无法知道哪个子表头管哪列数据。
<th scope="col"> 表示该表头控制整列数据 <li><code><th scope="row"> 表示该表头描述当前行（常用于首列标识） <li><code><th scope="colgroup"> 或 <code>scope="rowgroup"用于跨多列/多行的分组表头- 避免只写
<th> 不加 <code>scope，尤其在复杂表格中用
caption替代纯CSS标题，提供官方语义化说明caption是表格的唯一官方标题，会出现在table内部最外层，被屏幕阅读器优先读出，并影响SEO与打印行为。用<h2></h2>或<div class="title"> 包裹表格，只是视觉标题，机器无法识别其与表格的隶属关系。<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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>每个表格最多一个 <code>caption，必须直接子元素于table - 内容应简明描述表格主题，如
<caption>2023年Q4销售业绩</caption> - 避免用
aria-label或title替代caption—— 它们不参与表格语义树构建
避免滥用 colspan 和 rowspan 破坏行列对齐
合并单元格本身没问题，但它是可读性的高危操作：一旦合并逻辑出错，整个表格的行列索引就会偏移，CSS 选择器（如 tr:nth-child(odd)）失效，JavaScript 遍历 rows/cells 也会跳步或报错。
- 合并前先画草图，确认每行单元格总数一致
- 避免跨区域合并（如
rowspan="3"后忘了在下两行对应列留空） - 复杂合并场景下，优先考虑用
headers+id显式绑定单元格与表头，而非依赖位置推断
真正难的不是写对标签，而是在多人协作或历史代码中，一眼识别出哪些 <th> 缺 <code>scope、哪些 <tr> 本该在 <code>tbody 却被漏包、哪些 colspan 已让 cellIndex 错位——这些地方不报错，但会让后续维护和无障碍测试持续掉坑。
