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