不能用 套整个页面，因其专为结构化数据设计，用于布局会导致语义错乱、可访问性差、响应式失效、维护困难；报表页应仅在行列关系明确处使用，并配齐 /、 与 scope 属性，整体布局推荐 Flexbox 或 Grid。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
直接用 <table> 做数据报表页没问题，但必须明确：它只适合结构化、行列语义清晰的数据展示；拿它做整体页面布局（比如 header + sidebar + main + footer）是过时且有害的——可访问性差、响应式难、维护成本高。
<h3>为什么不能用 <code><table> 套整个页面？
<p>表格标签天生为「数据网格」设计，不是容器。用 <code><table> 嵌套 <code><tr> 和 <code><td> 拼首页，会导致：
<ul>
<li>屏幕阅读器把导航栏、侧边栏都读成“第1行第1列”，语义完全错乱</li>
<li>
<code>colspan / rowspan 一多，CSS 控制宽度、对齐、换行就失控
overflow: auto 又只作用于 <table> 自身，无法局部滚动
<li>后续想加动画、拖拽排序、虚拟滚动等交互，DOM 结构和事件委托都变得异常别扭</li>
<h3><code><table> 本身怎么写才适合报表？
<p>核心是守住语义边界：只在真正需要「行列对应关系」的地方用，且必须配齐语义化结构。</p>
<ul><li>必须包裹 <code><thead> 和 <code><tbody>，哪怕只有一行表头——这是让 JS 框架（如 DataTables）或辅助技术识别结构的前提
<li>表头一律用 <code><th>，不要图省事全用 <code><td>；有分组表头时，用 <code><th scope="col"> 或 <code><th scope="row"> 明确归属
<li>避免在 <code><td> 里塞 <code><div> + CSS 布局来“模拟按钮/开关”，该用 <code><button></button> 就用 <button></button>，否则键盘焦点和屏幕阅读器路径会断掉
class="numeric" 并在 CSS 中设 text-align: right，比靠空格或 对齐更可靠报表页整体布局该用什么？
现代方案就两个：CSS Flexbox 或 Grid，选哪个取决于区域数量和规律性。
立即学习“前端免费学习笔记（深入）”；
- 只有 header + main（含表格）+ footer：用 Flexbox，
flex-direction: column，main 设flex: 1占满剩余高度，表格再设height: 100%+overflow-y: auto - 要并排多个统计卡片 + 下方大表格 + 右侧筛选区：用 CSS Grid，定义
grid-template-areas，比如"header header header" "sidebar main main" "footer footer footer"，每个区域放一个<section></section>，表格只放在main区域内 - 千万别为了“兼容 IE11”硬上
<table> 布局——现在连政府网站都已放弃 IE 支持，真要保旧，用 <code>display: table的 CSS 方案更可控容易被忽略的细节：表格性能与可访问性
报表页卡顿，90% 不是 JS 逻辑问题，而是表格渲染本身没压住。
- 超过 500 行数据时，别一次性 render 全部
<tr>；用 <code>IntersectionObserver做可视区加载，或直接上虚拟滚动库（如react-window或原生scrollHeight+transform: translateY()） - 给
<table> 加 <code>role="grid"，给<th> 加 <code>role="columnheader"，给<td> 加 <code>role="gridcell"，补全 ARIA 层级（尤其当用了自定义单元格组件时） -
table-layout: fixed必须设——否则浏览器要先解析全部内容才能算列宽，大数据量下首屏白屏明显；配合<col>标签预设各列宽度，比如<col style="width: 120px"> <col style="width: 80px">
最常被跳过的一步：报表页不是写完 HTML 就能上线的。得打开 Chrome 的 Lighthouse，跑一遍「Accessibility」和「Performance」，看有没有「Missing table headers」或「Large layout shifts」报错——这些才是真实用户遇到的问题源头。
- 超过 500 行数据时，别一次性 render 全部
