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