如何做一个课程表的HTML表单

课程表应优先用 实现纯展示，仅在需用户交互（如选课）时外层包裹 ；必须包含 和 ，表头用 并设置 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，但别滥用——比如“上午”合并三行，后面新增一节课就容易错位

让课程表在手机上不横向滚动的关键控制点

直接写 <table> 在移动端几乎必然溢出。不是靠 <code>overflow-x: auto 硬包一层完事，而是从结构上收窄信息密度。

• 删掉冗余文字：把“高等数学（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"。

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

  • 课程选择控件统一放在 <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 用户就得左右拖半天才能看清一格内容。