制作课程表需用HTML <table> 还原“时间×星期”二维结构：<thead> 定义星期表头，<tbody> 每行以 <th scope="row"> 标注节次，合理使用 rowspan/colspan 合并跨时段课程，确保语义清晰、列数对齐、可访问性强。

用 HTML <table> 制作课程表，核心是还原“时间 × 星期”的二维结构：行代表节次（或时段），列代表星期几。结构清晰、语义正确、合并合理，才能保证可读性、可访问性和后期样式控制。

明确表头分区：用 `` 和 `` 区分行列标题 课程表不是普通数据表，它有双重表头——横向是星期，纵向是节次。必须分开定义： - `` 里放两行：第一行留空（对应左上角），后几列写“星期一”到“星期五”； - 第二行可选加时段说明（如“上午”“下午”），或直接进入 ` `； - 每个节次所在列首单元格要用 `第1节`，让屏幕阅读器知道这是行标题； - 星期标题统一用 ``，不用 ` `，语义更准确。

错误做法：把“星期一”“第1节”全塞进 `

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

`；正确做法是第一行 ` ` 写星期，第一列 ` ` 写节次。

规范使用 `rowspan` 和 `colspan` 合并跨时段课程

一节课连上两节、或横跨两天，不能靠空 ` ` 填充，得用合并属性： - 跨节次（竖向合并）：在起始 ` ` 加 `rowspan="2"`，下一行同一列就跳过，不写 ` `； - 跨星期（横向合并）：在起始 ` ` 加 `colspan="2"`，后面一列就不再单独写 ` `； - 避免 `rowspan` 和 `colspan` 嵌套（比如一个单元格既设 `rowspan` 又设 `colspan`），容易错位、打印异常； - 所有行 ` ` 中 `` 或 ` ` 数量必须一致，等于表头 ` ` 总数（含首列节次），否则表格会塌陷或错列。

例如：周三第2–3节的课，就在“第2节”行、“周三”列的 `

课程名`，然后“第3节”行的“周三”列不写任何单元格。

用 `` 封装全部课时行，保持结构语义化 所有具体节次内容（第1节、第2节……）都放在 ` ` 里，每节是一行 ``： - 每行第一个单元格是 `第X节`，其余为 ``； - 即使某时段没课，也要保留空 ` `，确保列数对齐； - 不要把星期标题也塞进 ` `，否则破坏语义，影响 CSS 定位和响应式处理； - 可给 `` 加 `class="timetable"` 方便后续统一控制边框、字体、高度等。

好处：语义清晰，打印时 `

` 自动每页重复；配合 CSS 可轻松实现隔行变色、悬停高亮、移动端隐藏节次列等效果。

立即学习“前端免费学习笔记（深入）”；

基础结构代码骨架（可直接复用）

以下是最简但完整的二维结构模板：

<table class="timetable">
  <thead>
    <tr>
      <th></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">第1节</th>
      <td></td><td>数学</td><td rowspan="2">物理实验</td><td></td><td>英语</td>
    </tr>
    <tr>
      <th scope="row">第2节</th>
      <td>语文</td><td></td><td></td><td>编程</td>
    </tr>
  </tbody>
</table>