课程列表应使用语义化标准表格，含<thead><tbody>，避免colspan/rowspan；字段明确、时间格式统一；移动端用max-width+word-break或卡片流；多学期用多个<tbody>；导出需处理UTF-8 BOM和日期格式。
用 <table> 写课程表，但别用 colspan 和 rowspan 硬凑课表格子
课程信息表格 ≠ 传统课表（比如周一到周五、每节45分钟那种带合并单元格的网格）。如果是展示「课程列表」——比如《Python编程》《数据结构》《Web开发》每门课的名称、教师、学分、上课时间等字段——直接用标准语义化 <table> 最稳妥，浏览器兼容性好、屏幕阅读器友好、打印也正常。
常见错误是看到“课程表”就下意识想用 rowspan 拼出节次+教室的二维网格，结果数据一变、维护就崩。除非你真在做一个教务系统后台的排课视图，否则别碰复杂合并。
- 用
<thead>包住<th>列头，明确每列含义（如课程名称、授课教师、学分、上课时间） -
上课时间列建议统一格式，例如周一 1-2 节（8:00-9:35），避免写成Mon 1-2 / Wed 3-4这类非结构化文本，否则没法排序或筛选 - 如果某门课有多个上课时间，老老实实拆成两行，不要塞在一个单元格里加换行符
<br>—— 这会让 JS 处理、导出 Excel 或无障碍访问失效
让课程表格在手机上不横向滚动
课程信息常含长文本（比如课程简介、详细时间地点），桌面端撑开还行，移动端一拉就横向溢出。这不是靠 overflow-x: hidden 掩耳盗铃能解决的。
- 给
<table>加width: 100%，再给每个<th>和<td>设max-width: 200px（或按内容调整），并启用自动换行：word-break: break-word - 对「课程名称」这类关键字段，可用
white-space: normal允许折行；对「学分」「周学时」等短字段，用white-space: nowrap防止被错误截断 - 真塞不下？用响应式方案：小屏下把表格转为卡片流，每门课一个
<div class="course-card">，用 CSS Grid 或 Flex 布局，比硬撑表格更可控
用 <tbody> 分组课程，比如按学期或类型
如果页面要同时列出「2024春」和「2024秋」的课程，或「必修课」「选修课」混排，别建两个独立 <table>。用多个 <tbody> 更语义清晰，且方便用 JS 控制显隐。
立即学习“前端免费学习笔记（深入）”；
- 每个
<tbody>加data-term="2024春"或data-type="必修"属性，方便后续筛选 - 对应加一个
<caption>或独立标题<h3>2024春季学期课程</h3>，<caption>会被读屏软件识别为表格说明，但视觉上位置固定，不如外部标题灵活 - 注意：多个
<tbody>不影响 CSS 选择器写法，tbody tr:nth-child(even)仍可隔行变色，无需额外处理
导出课程表格为 Excel 时中文乱码或格式错乱
用户点击「导出Excel」后发现中文是方块、时间列变成数字、合并单元格丢失——大概率是后端生成 CSV 时没设 UTF-8 BOM，或前端用 SheetJS 导出时没指定 type: "array" 和 cellDates: true。
- 若用纯前端导出（如 SheetJS），确保创建工作簿前设置：
const ws = XLSX.utils.json_to_sheet(data, { cellDates: true })，否则2024-03-01可能被当普通字符串而非日期 - CSV 方案最简单但限制多：必须在文件开头写入 UTF-8 BOM（
\uFEFF），否则 Excel for Windows 默认用 GBK 打开中文就乱码 - 服务端生成 Excel（如 Python 的 openpyxl、Java 的 Apache POI），记得显式设单元格格式，比如时间列调用
number_format = 'yyyy-mm-dd hh:mm'，别依赖 Excel 自动识别
课程表格本质是结构化数据展示，不是视觉游戏。字段定义清楚、响应式有兜底、导出路径可验证，比花哨的动画或自定义滚动条重要得多。
