HTML表格清晰的关键在于语义正确、结构合理、可读性强：必须用<thead><tbody>区分表头与数据，<th>仅用于表头且对齐列，添加scope属性明确行列关系，用<caption>说明用途，禁用<div><span>破坏语义。
直接用 <table> 就能做出清晰的数据统计表，但“清晰”不只靠边框线和加粗，关键在语义正确、结构合理、可读性强——否则屏幕阅读器读不出来，Excel 导出错乱，移动端一塌糊涂。
用 <thead> + <tbody> 区分表头和数据行
很多人把所有 <tr> 堆一起，结果表头随滚动消失、打印时每页都缺标题。浏览器和辅助工具靠 <thead> 识别“这是标题”，<tbody> 识别“这是数据”。
常见错误现象：Ctrl+P 打印时第一页有表头，第二页开始没标题；用 Excel 打开 HTML 表格，第一行被当普通数据处理。
- 必须把列名包裹在
<thead><tr><th>月份</th><th>销售额</th></tr></thead>中 -
<th>只用于表头单元格，不能用<td>冒充 - 每一列的
<th>应该和下方<td>在同一列逻辑对齐（别跳列）
给表格加 scope 属性提升可访问性
光用 <th> 不够。当表格有行列双表头（比如既有“产品”又有“季度”），屏幕阅读器需要知道这个表头管的是“这一行”还是“这一列”。scope="col" 或 scope="row" 就是干这个的。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景：带汇总行/列的统计表（如“总计”行、“Q1/Q2”列）。
-
<th scope="col">Q1</th>→ 告诉读屏软件：这列下面所有<td>都属于 Q1 -
<th scope="row">手机</th>→ 告诉读屏软件：这行右边所有<td>都是手机的数据 - 如果省略
scope，多维表格可能被读成“手机 Q1 280 Q2 310”而无上下文
用 aria-label 或 caption 说明表格用途
单纯看 <table> 标签，没人知道这是“2024 年华东区销售统计”还是“网页布局栅格”。搜索引擎和读屏器依赖文字描述理解表格意义。
性能 / 兼容性影响：所有现代浏览器和主流读屏器（NVDA、VoiceOver）都支持 <caption>；aria-label 更灵活但需确保不和 <caption> 冲突。
- 优先用
<caption>2024 年各季度销售额（单位：万元）</caption>，放在<table>开头 - 如果 caption 不够用（比如要隐藏视觉显示但保留语义），才加
aria-label="销售统计：按季度与产品分类" - 避免空
<caption></caption>或纯符号如<caption>?</caption>，读屏器会念出来
最容易被忽略的是：表格里混用 <div> 或 <span> 做样式控制（比如“让某格居中”），这会破坏表格语义结构。真要控制样式，用 CSS 的 text-align、vertical-align 和 border-collapse——HTML 表格的清晰，从来不是靠“看起来整齐”，而是靠“结构说得清”。
