课表应使用按二维时间矩阵（节次×星期）构建，确保与列数一致、正确使用rowspan/colspan、添加语义标签，并通过最小CSS调试结构，小屏改用横向滚动或CSS Grid替代。

用 做课表，先保证结构不出错

课表本质是二维时间矩阵（节次 × 星期），

天然匹配，但错误嵌套或漏单元格会直接导致错行、错列。最常见问题是：表头 里 每行 必须有 6 个 每个 必须也含 6 个单元格：首列用

别省略

：它不是装饰，是语义必需项，屏幕阅读器靠它识别表格用途

rowspan 和 colspan 合并单元格的坑在哪

跨节次课程（如连上两节）必须用 rowspan，跨天课程（如某课只在周三、周五上）得用 colspan。但这两个属性极易引发连锁错位——只要一个单元格设了 rowspan="2"，下一行对应位置就必须跳过那个

，看每行

数量和

数量不一致——浏览器会自动补空单元格，但视觉上全乱了。

实操建议：

• 先写死列数：比如周一到周五共 5 天 + 1 列节次，总共 6 列；

（首列写“节次”，后面依次“周一”“周二”…）

标节次（如“第1节”），其余 5 个用

，哪怕内容为空也要写

，否则整行偏移。

实操建议：

• 从上到下、从左到右逐行写，遇到要合并的单元格，先写当前行的

，再在后续 N−1 行里，对应列位置**不写任何

**

用浏览器开发者工具检查 DOM 结构：展开

数量是否恒定；如果某行少一个，大概率是 rowspan 没跳过

colspan 相对安全，但注意：它只影响当前行，不会改变后续行的列数，别误以为能“撑开”整列宽度

CSS 边框与对齐的最小必要配置

默认

没边框、没间距、文字挤成一团，但加太多 CSS 反而掩盖结构问题。调试阶段只加三样就够了：

实操建议：

• 强制边框：给

加 border-collapse: collapse，再设 border: 1px solid #ccc —— 这比老式 border="1" 更可控

统一单元格内边距：th, td { padding: 8px 12px }，避免文字贴边

节次列右对齐、课程名居中：th[scope="row"] { text-align: right }，td { text-align: center }

别急着加背景色或高度——先让结构稳了，再调样式；否则颜色遮盖错位，反而更难定位问题

响应式课表为什么不能只靠

手机屏宽通常不足 400px，而 6 列课表（节次+5天）强行缩放会导致文字叠在一起、横向滚动条卡死。CSS 媒体查询对 display: table 支持极差，@media (max-width: 480px) 里设 width: 100% 没用，table-layout: fixed 又容易截断内容。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

实操建议：

• 小屏优先方案：用 overflow-x: auto 包一层容器，让课表横向滚动，比强行压缩靠谱得多
• 真要换布局，别硬改

，直接切到

+ CSS Grid —— 它原生支持行列重排，grid-template-areas 一换就行

如果必须保留

，至少加 role="presentation"（仅当纯展示无数据语义时），否则辅助工具会把课表当成数据表读，读出一堆“空单元格”

复杂点在于：课表不是静态表格，它要承载跨节次、跨天、可编辑、可导出等需求。

能快速搭出骨架，但一旦要交互或适配多端，就得提前规划好 DOM 结构是否可被 JS 驱动，而不是堆完样式就收工。