课表应使用按二维时间矩阵（节次×星期）构建，确保与列数一致、正确使用rowspan/colspan、添加语义标签，并通过最小css调试结构，小屏改用横向滚动或css grid替代。
用 <table> 做课表，先保证结构不出错
<p>课表本质是二维时间矩阵（节次 × 星期），<code><table> 天然匹配，但错误嵌套或漏单元格会直接导致错行、错列。最常见问题是：表头 <code><thead> 里 <code><th> 数量和 <code><tbody> 每行 <code><td> 数量不一致——浏览器会自动补空单元格，但视觉上全乱了。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>先写死列数：比如周一到周五共 5 天 + 1 列节次，总共 6 列；<code><thead> 必须有 6 个 <code><th>（首列写“节次”，后面依次“周一”“周二”…）
<li><code><tbody> 每个 <code><tr> 必须也含 6 个单元格：首列用 <code><th scope="row"> 标节次（如“第1节”），其余 5 个用 <code><td>，哪怕内容为空也要写 <code><td></td>
<caption></caption>：它不是装饰，是语义必需项，屏幕阅读器靠它识别表格用途
rowspan 和 colspan 合并单元格的坑在哪
跨节次课程（如连上两节）必须用 rowspan，跨天课程（如某课只在周三、周五上）得用 colspan。但这两个属性极易引发连锁错位——只要一个单元格设了 rowspan="2"，下一行对应位置就必须跳过那个 <td>，否则整行偏移。
<p>实操建议：</p>
<ul><li>从上到下、从左到右逐行写，遇到要合并的单元格，先写当前行的 <code><td rowspan="N">，再在后续 N−1 行里，对应列位置**不写任何 <code><td>**
<li>用浏览器开发者工具检查 DOM 结构：展开 <code><tbody>，看每行 <code><td> 数量是否恒定；如果某行少一个，大概率是 <code>rowspan 没跳过
colspan 相对安全，但注意：它只影响当前行，不会改变后续行的列数，别误以为能“撑开”整列宽度CSS 边框与对齐的最小必要配置
默认 <table> 没边框、没间距、文字挤成一团，但加太多 CSS 反而掩盖结构问题。调试阶段只加三样就够了：
<p>实操建议：</p>
<ul><li>强制边框：给 <code><table> 加 <code>border-collapse: collapse，再设 border: 1px solid #ccc —— 这比老式 border="1" 更可控
th, td { padding: 8px 12px }，避免文字贴边th[scope="row"] { text-align: right }，td { text-align: center }
响应式课表为什么不能只靠 <table>
<p>手机屏宽通常不足 400px，而 6 列课表（节次+5天）强行缩放会导致文字叠在一起、横向滚动条卡死。CSS 媒体查询对 <code>display: table 支持极差，@media (max-width: 480px) 里设 width: 100% 没用，table-layout: fixed 又容易截断内容。
实操建议：
- 小屏优先方案：用
overflow-x: auto包一层容器，让课表横向滚动，比强行压缩靠谱得多 - 真要换布局，别硬改
<table>，直接切到 <code><div class="timetable-grid"> + CSS Grid —— 它原生支持行列重排，<code>grid-template-areas一换就行 - 如果必须保留
<table>，至少加 <code>role="presentation"（仅当纯展示无数据语义时），否则辅助工具会把课表当成数据表读，读出一堆“空单元格”复杂点在于：课表不是静态表格，它要承载跨节次、跨天、可编辑、可导出等需求。
<table> 能快速搭出骨架，但一旦要交互或适配多端，就得提前规划好 DOM 结构是否可被 JS 驱动，而不是堆完样式就收工。</table>
