表格应扁平化表示分类层级，设category、subcategory、keyword三列，用scope属性明确表头作用范围，禁用rowspan和HTML列表，避免用于纯样式布局，导出前需转义、处理空值并去重排序。
表格结构要匹配分类层级关系
图书分类常有“一级类目→二级类目→细分标签”这种嵌套逻辑，但 <table> 本身不支持树形结构。硬用 <tr> 堆叠会导致语义混乱、无法筛选或排序。
正确做法是：把分类扁平化为行记录，用列区分层级。比如设三列：category（一级）、subcategory（二级）、keyword（关键词），空值用 - 或留空，别用 rowspan 合并单元格来模拟缩进——屏幕阅读器和 Excel 导入都会出错。
- 一级类目如“文学”“计算机”单独成行，
subcategory和keyword列为空 - “计算机”下的“前端开发”算二级类目，
category填“计算机”，subcategory填“前端开发”，keyword可填“Vue”“React” - 避免在单元格里塞 HTML 列表（
<ul>）或手动加缩进空格，这会让数据不可提取
用 scope 属性让表头可访问
没加 scope 的表格，读屏软件会把每个单元格当成孤立文本，用户根本不知道“JavaScript”对应的是哪一类。必须给 <th> 显式声明作用范围：
- 列标题用
scope="col" - 行标题（如有）用
scope="row" - 如果第一列是类目名称，且每行代表一个分类路径，那这一列的
<th>应设scope="row"
<thead>
<tr>
<th scope="col">一级类目</th>
<th scope="col">二级类目</th>
<th scope="col">关键词</th>
</tr>
</thead>不写 scope 看似省事，但导出 CSV、被爬虫解析、甚至部分浏览器打印时，表头和数据就对不上。
避免用表格实现纯样式布局
有人把分类菜单做成表格，只为“对齐好看”，比如每行放 4 个分类卡片。这是反模式：
- 表格意味着行列间存在逻辑关联，而并列的分类项之间没有数据关系
- 一旦需要响应式换行（比如手机端每行只显示 2 个），
<table>会强制保持列宽，要么溢出，要么文字折行难看 - 搜索引擎可能误判内容结构，影响 SEO
真要网格布局，用 display: grid 或 flex；要语义化列表，用 <dl> + <dt>/<dd>。表格只用于二维关系明确的数据集。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
导出和筛选前先确认数据干净
直接把数据库查出的分类结果塞进表格，容易带出问题：
- 类目名称含 HTML 字符（如
&、<）没转义，导致表格结构被破坏 - 空值没处理，渲染出空白单元格，排序时排到最前或最后，不符合业务预期
- 同一二级类目出现在多个一级类目下（比如“算法”既在“计算机”也在“数学”），人工核对容易漏
导出 CSV 或接入 JS 排序库（如 sortTable()）前，至少做三件事：
- 用
textContent赋值而非innerHTML，防 XSS - 把
null或undefined统一转成"-"或空字符串 - 对
category列去重并按字母序排列，避免“小说”“小說”“Novel”混排
表格不是万能容器，它只负责说清“谁属于谁”。分类关系复杂了，就得换数据结构，而不是给 <td> 加更多 class。
