HTML5提供table、CSS Grid和Flexbox三种课表实现方式：table语义清晰兼容性好；CSS Grid支持响应式与跨单元格布局；Flexbox适用于多列横向滚动场景。
如果您需要在网页中展示课程安排，HTML5 提供了多种方式构建清晰、语义明确的课表结构。以下是使用 table 标签 和 div 布局 两种主流方法的具体实现步骤：
一、使用 table 标签制作标准课表
table 标签天然适合呈现行列对齐的二维数据，如课表的时间与课程对应关系，具有语义清晰、兼容性好、代码简洁的特点。
1、在 HTML 文件中插入 2、使用 立即学习“前端免费学习笔记（深入）”； 3、在 4、为表头列（时间列）添加 5、为提升可访问性，在 CSS Grid 布局提供精确的行列控制能力，适合实现自适应、跨节次合并（如连上两节课）、悬停交互等现代课表需求，且避免 table 的语义局限。 1、创建外层容器 2、通过 3、为每个课程单元格添加独立 4、为节次列和星期行列添加 5、添加媒体查询，在屏幕宽度小于 768px 时将网格改为单列流式布局，每节课块垂直堆叠并显示完整日期与时间。 当课表列数较多（如含周六、周日或多个班级）且需在小屏设备上保持横向信息完整性时，Flexbox 结合容器溢出控制可实现平滑滚动浏览。 1、创建主容器 标签，并添加
border="1" 或通过 CSS 控制边框便于调试。
包裹表头行，其中第一单元格留空，后续单元格依次写入“星期一”至“星期五”。 中为每节课次（如第1节至第5节）创建一行 ，每行内用 填充对应节次与各天的课程名称或“空闲”。
，确保屏幕阅读器可正确识别行标题。
上添加
role="grid" 属性，并为每个单元格添加 role="gridcell"（若需严格 ARIA 支持）。
二、使用 div + CSS Grid 制作响应式课表
display: grid 及列轨道定义，例如 grid-template-columns: 80px repeat(5, 1fr)（首列为节次，后五列为周一至周五）。
grid-template-rows 明确设定行高，如 repeat(5, minmax(60px, auto)) 表示 5 节课，每行最小高度 60px。grid-column 和 grid-row 指定其起始与结束位置，例如周三第2–3节设置为 grid-column: 4; grid-row: 3 / 5;。
grid-column 或 grid-row 定位，确保其固定在对应区域。
三、使用 div + Flexbox 实现横向滚动课表
