直接用写课表易翻车，因其二维结构难以处理时间、空间、状态三重维度交织；改用+CSS Grid更健壮、语义清晰且响应式友好。
为什么直接用 写课表容易翻车不是不能用 ，而是多数人一上来就套用传统表格结构：行列硬对齐、rowspan/colspan 随意嵌套、单元格里再塞 布局。结果是：课表一加“跨节”“连上两节”“临时调课”，HTML 就开始错位；导出 PDF 或适配手机时，表格直接横向溢出或堆叠失效。根本问题不在标签本身，而在于把课表当成纯二维数据来处理——但真实课表有时间维度（节次）、空间维度（教室/教师）、状态维度（已排/冲突/空闲），三者交织， 的行列模型天然吃力。- 用
强行表示“第3节和第4节合并为一个大课”时，rowspan="2" 会让后续所有列的对齐逻辑变脆弱- 当某天某节课被取消，只删一行内容，整个表格的语义结构就断了——屏幕阅读器读不出“周三第二节无课”，只会跳过空白单元格
- 响应式断点一加，
display: table-cell 在小屏下无法换行，只能滚动，用户体验归零
用
课表本质是“时间段 → 课程信息”的映射关系，
示例结构：
-
rowspan
-
- 配合 CSS Grid，
grid-template-areas 让课表在小屏下真正“可读”
用 CSS Grid 布局课表时，别只写 grid-template-columns: repeat(7, 1fr)。真实痛点是：手机上看课表，横向拉不到底，又不想牺牲信息密度。这时候 grid-template-areas 是解法——把“星期”作为区域名，让每节课自动落入对应区域，再用 @media 重定义区域顺序。
关键写法：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
.timetable {
display: grid;
grid-template-areas:
"mon tue wed thu fri sat sun"
"mon tue wed thu fri sat sun";
}
.timetable dt:nth-of-type(1) { grid-area: mon; }
.timetable dt:nth-of-type(2) { grid-area: tue; }
/* …依此类推 */
@media (max-width: 480px) {
.timetable {
grid-template-areas:
"mon" "tue" "wed" "thu" "fri" "sat" "sun";
}
}
- 桌面端保持横向课表，小屏自动转为“周一所有课→周二所有课”的垂直流，用户手指滑动即可，无需横向滚动
- 每个
grid-area 可独立设置背景色、边框、内边距，比 的 更灵活- 注意：必须给每个
grid-area，否则默认会塌缩到第一格
动态课表要预留 data-* 属性接口
如果课表要对接后台（比如从教务系统拉取实时数据），别在 HTML 里硬写课程名和教室。所有可变字段都用 data- 属性存原始值，渲染交给 JS 或服务端模板。
例如：
-
HTML5基础｜张老师｜机房201
- 前端点击某节课时，直接读
dataset.courseId 调 API 查作业/考勤，不用再解析文本
- 后端导出 Excel 时，可直接提取
data- 属性生成结构化字段，避免 OCR 或正则匹配的误差
- 特别注意：别用
data-time="9:00-10:30" 这种带符号的值，改用 data-start="0900" data-end="1030"，方便排序和计算时长
重构课表最常被忽略的，是“节次”这个维度的抽象粒度。把它当成纯字符串（如“第1节”）还是时间区间（如“08:00–08:45”），决定了后续能否支持自动冲突检测、教室占用分析、甚至与日历 App 同步。动手前先想清楚：你这页课表，到底是给人看的，还是给程序读的。
更灵活grid-area，否则默认会塌缩到第一格动态课表要预留
|
|---|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
