课程表应优先用 实现纯展示，仅在需用户交互（如选课）时外层包裹 ；必须包含 和 ，表头用 并设置 scope 属性，移动端需精简内容、控制字号与白空间，避免滥用 rowspan/colspan。
用 <table> 还是 <code><form></form>？先分清用途
课程表本身是展示型结构，不是数据收集入口。如果你要“做课程表”，90% 的情况该用 <table>；只有当你需要学生选课、提交偏好、或对接后端录入时，才在表格外加一层 <code><form></form> 包裹。混用会导致语义混乱、屏幕阅读器误读、甚至 CSS 选择器失效。
<table>：显示周一到周五、每节课时间、课程名、教室——纯展示 <li> <code><form></form>：带<input type="checkbox">让用户勾选想修的课，或用<select></select>选班级- 常见错误：
<form></form>里只放<table> 却不给任何可交互控件，白套一层，还可能触发浏览器自动填充干扰样式 <h3><code><table> 的最小可用结构别漏掉这些标签 <p>很多人写完 <code><tr><td>语文</td></tr>就以为完事了，结果表头对不齐、响应式崩塌、打印出来没标题。核心是必须包含<thead> 和 <code><tbody>，且第一行用 <code><th> 而非 <code><td>。 <ul><li><code><thead> 里放时间列和星期列（如“8:00–8:45”、“周一”），用 <code><th scope="col"> 或 <code><th scope="row"> 明确维度 <li>避免把所有单元格都写成 <code><td>：屏幕阅读器无法区分标题和数据，键盘导航会跳过逻辑层级 <li>跨行/跨列用 <code>rowspan和colspan，但别滥用——比如“上午”合并三行，后面新增一节课就容易错位 - 删掉冗余文字：把“高等数学（A）”缩为“高数A”，“第三教学楼302室”缩为“三教302”
- 用
white-space: nowrap配合font-size: 0.85em控制单格宽度，比强行设width: 120px更适应不同设备 - 真要响应式，优先考虑用 CSS Grid 重写布局（
display: grid+grid-template-areas），<table> 本身不支持真正的流式断点 <li>别信“给 <code><table> 加 <code>max-width: 100%就能自适应”——它只限制容器宽，内部单元格照样撑开如果真要加表单交互，
<input>放哪、怎么命名才不翻车加复选框或下拉框时，位置和命名直接影响后端接收和 JS 操作。别把
<input>塞进<th>，也别用无意义的 <code>name="a1"。立即学习“前端免费学习笔记（深入）”；
精美淘宝客单页面 zblog模板下载采用zblog修改的模板，简单方便，直接解压上传到空间即可使用，页面简单，适合SEO，导航，次导航，最新文章列表，随机文章列表全部都有，网站采用扁平结构，非常适用淘宝客类小站，所有文章都在根目录下。所有需要修改的地方在网页上各个地方都有标注说明，一切在网站后台都可以修改，无须修改任何程序代码，是新手的不二选择。后台登陆地址： 域名/login.asp用户名：admin (建议不要修改)密码：adm
- 课程选择控件统一放在
<td> 里，且每个 <code><input>的name带上下文，例如name="course-mon-1"（周一第一节）或name="course_id"+value="MATH201" - 避免多个
<input>共用同一个name却没设value——后端收到空数组或覆盖值 - 用
<fieldset></fieldset>+<legend></legend>分组（如“可选课程”、“已选课程”），比纯靠 CSS 分隔更健壮 - 提交前校验：JS 里用
document.querySelectorAll('input[type="checkbox"]:checked')比遍历name字符串靠谱得多
实际写的时候，最常被忽略的是
scope属性和移动端字体大小的联动——少了它，视障用户根本不知道某节课对应星期几；而忘了调小字号，iPhone 用户就得左右拖半天才能看清一格内容。 - 课程选择控件统一放在
让课程表在手机上不横向滚动的关键控制点
直接写 <table> 在移动端几乎必然溢出。不是靠 <code>overflow-x: auto 硬包一层完事，而是从结构上收窄信息密度。
