课程安排表应采用二维时间矩阵结构，行表示时间段、列表示星期，用区分表头（含星期和时段）、放置课程内容，合并单元格需规范使用rowspan/colspan并避免嵌套，配合css控制居中、截断与移动端适配。
表格结构怎么搭才不乱
课程安排表本质是二维时间矩阵，行代表时间段（如上午/下午/第1节），列代表星期几。用 <table> 搭建时，必须明确区分表头和数据区：用 <code><thead> 包裹第一行（星期）和第一列（时段），用 <code><tbody> 放课程内容。别把所有 <code><tr> 都平铺——否则合并单元格时容易错位、样式难控制。
<p>常见错误是把“星期一”到“星期五”直接写进 <code><tr> 里，却忘了第一列“第1节”“第2节”也得是表头。正确做法是：第一行用 <code><th> 写星期，第一列每行也用 <code><th> 写时段，其余全部用 <code><td>。
<h3>合并单元格要避开 rowspan/colspan 嵌套陷阱</h3>
<p>一门课跨多节或跨多天时，必须用 <code>rowspan 或 colspan。但注意：被合并的单元格本身不能留空，也不能再套其他 <td>；且 <code>rowspan 值必须等于它实际占据的行数（不是“看起来占了几行”）。比如“高等数学”从第1节上到第2节，就得在第1行第2列写 <td rowspan="2">高等数学</td>，同时删掉第2行第2列那个原本该存在的 <td>。
<p>容易踩的坑：</p>
<ul><li>
<code>rowspan="3" 却只删了下方2个 <td>，导致第4行错位
<li>对角线方向合并（比如既 <code>rowspan 又 colspan），浏览器渲染不可靠，尽量避免
grid 或 flex 替代表格布局时，rowspan/colspan 失效——这类布局不适合课程表如何让课程名居中又不撑宽表格
默认 <td> 文字左对齐、自动换行，课程名一长就拉宽整列。解决方法是统一加内联样式：<code>style="text-align:center; white-space:nowrap;"。如果课程名实在太长（如“人工智能导论（含实验）”），可加 overflow:hidden; text-overflow:ellipsis; 截断，但得配合 width 或 max-width 才生效。
别依赖 <center></center> 标签——已废弃；也别给整个 <table> 设 <code>width="100%"，容易在小屏上横向滚动。更稳妥的是设固定列宽，例如：
<col style="width:120px"><col style="width:100px"><col style="width:100px">
移动端适配的关键不是响应式，而是简化
强行让桌面版课程表在手机上缩放，结果字小到看不清、左右滑动体验差。真实可行的做法是：用媒体查询隐藏非当前日列，或改用折叠卡片式布局——但这已经超出纯 HTML 表格能力范围。如果坚持用表格，至少做到三点：
- 去掉所有固定像素宽高（如
width="800"），改用百分比或auto - 给
<table> 加 <code>style="display:block; overflow-x:auto;"，允许水平滚动 - 避免在
<td> 里嵌套 <code><div> 或多层 <code><span></span>，增加渲染负担复杂课程表真要兼顾多端，表格只是起点，后续大概率得用 JavaScript 动态生成或切换视图——这点常被忽略，但决定项目后期维护成本。
