内容型表格布局必须使用展示具行列逻辑的结构化数据，强制包含、、，并正确使用scope或headers关联表头与单元格，配合和table-layout: fixed控制列宽，外层用overflow-x: auto实现响应式滚动。
内容型表格布局，指用 <table> 展示真正具有行列逻辑关系的结构化数据（如课程表、订单明细、API 字段说明），而非用于页面骨架或图文排版。这种用法语义正确、无障碍友好、SEO 清晰，且浏览器原生支持 colspan/rowspan 和表头绑定。
<h3>必须包含 <code><thead>、<code><tbody> 和 <code><caption></caption>
缺一不可——不是“可选”，而是语义和可访问性的硬性要求。
-
<caption></caption>是表格的标题，会被屏幕阅读器优先读出；不写就等于没告诉用户“这是什么表” <thead> 包裹表头行，让浏览器知道哪些列是维度（如“商品名”“单价”“数量”），支持固定表头滚动（配合 <code>position: sticky）<tbody> 是主体数据区，JS 操作增删行时应只动它，避免误改表头或表尾 <li>漏掉 <code><thead> 或把 <code><th> 直接丢在 <code><tbody> 里，会导致键盘 Tab 焦点顺序错乱、排序脚本失效、打印时表头不重复 <h3><code><th> 必须用 <code>scope或id/headers显式关联数据单元格否则屏幕阅读器无法理解“这一列数字对应哪一列含义”，尤其当表格有跨行/跨列表头时。
- 单层表头：用
<th scope="col">（列头）或 <code><th scope="row">（行头），浏览器自动推导关系 <li>多级表头（如“Q1–Q4”下分“收入”“支出”）：第一行 <code><th id="q1">Q1</th>，第二行<th headers="q1">收入</th> - 避免只靠视觉位置判断——
scope属性是唯一被所有主流读屏器稳定支持的方案 - 不设
scope或headers，WCAG 会直接判为 A 级失败 -
<col>必须紧跟<table> 后、<code><thead> 前，写在 <code><thead> 里无效 <li>列宽单位优先用 <code>px（如<col style="width: 150px;">），百分比在 IE9–11 中解析不稳定 - 必须同时声明
style="table-layout: fixed; width: 100%;"，缺一不可——width: 100%没有参照物，table-layout: fixed没有宽度则退化为 auto - 长文本溢出处理：在
<td> 上加 <code>style="white-space: normal; word-break: break-word;"，别依赖nowrap截断响应式场景下优先用
overflow-x: auto包裹，而非强行换行内容型表格的核心是行列关系不可拆，强行在小屏上堆叠成卡片会丢失维度对应，比如“订单号→商品名→数量→状态”一旦打散，信息就废了。
- 外层用
<div style="width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;"> 包住 <code><table><li><code><table> 自身设 <code>display: block，切断表格格式化上下文，让它服从外层溢出控制 - 删掉所有
white-space: nowrap，对 URL 或长 ID 加word-break: break-all - 避免给
<th> 或 <code><td> 设 <code>min-width，它会绕过table-layout: fixed的约束，导致横向滚动失效最易被忽略的是
<caption></caption>和scope——它们不改变视觉，但决定表格是否真正“可用”。一个没<caption></caption>的订单表，在语音助手中只会被读作“表格，共 12 行 4 列”，用户根本不知道该关注什么。
- 外层用
列宽控制必须用
<col>+table-layout: fixed否则宽度由内容撑开，小字体变大、图片加载延迟、中英文混排都会导致列跳变，破坏阅读节奏。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 单层表头：用
