成绩单必须用 thead/tbody 结构，因浏览器和打印引擎依赖语义识别表头与数据行；列名须用 th 包在 thead 中，学生数据须用 td 放入 tbody，混用会导致错位、读屏混乱、打印无表头、css 失效。
纯 HTML 表格本身不“生成”成绩单，它只负责正确、语义化地展示成绩数据；用错 th 和 td 会导致屏幕阅读器读错、打印分页错乱、CSS 样式失效——这不是样式问题，是结构错误。
为什么成绩单必须用 thead/tbody 而不是一堆 tr
浏览器和打印引擎依赖语义结构识别“表头行”和“数据行”。没有 thead，display: table-header-group 在分页时无法重复表头；没有 tbody，CSS 选择器如 tbody tr:nth-child(odd) 会失效。
- 所有列名（如“学号”“语文”“总分”）必须包在
thead内的tr中，且每个单元格用th - 所有学生数据行必须放在
tbody内，每行单元格统一用td，不能混用th -
tfoot可选，但若要加“平均分”“最高分”汇总行，必须放这里，不能塞进tbody
th 和 td 混用的典型错误现象
常见错误是把第一列“张三”“李四”也写成 th，或在数据行里漏掉一个 td 导致整行偏移。后果直接可见：
- 表格视觉错位：某列整体右移一格，对不齐
- 屏幕阅读器连续读出“张三 学号 姓名 语文”，顺序混乱
- 导出 PDF 或打印时，第二页开头丢失表头，只剩空数据
-
th默认加粗居中，td默认左对齐普通字体——混用后样式不可控，还得额外写 CSS 覆盖
只读成绩单根本不需要 readonly 属性
readonly 对 td 和 th 完全无效，浏览器直接忽略。所谓“只读”，靠的是没放任何表单控件。
- 错误写法：
<td readonly>89</td>→ 控制台无提示，但属性白加 - 正确做法：确保所有成绩都是纯文本，如
<td>89</td>，不包裹<input value="89"> - 如需视觉禁用效果（比如灰掉、禁用鼠标），用 CSS：
td { pointer-events: none; user-select: none; }，而非动 HTML 属性
打印与响应式容易被忽略的细节
成绩单常需打印或在平板查看，仅写结构不够：
- 必须加
border-collapse: collapse，否则默认双线边框难看且占空间 - 打印时加
@media print { thead { display: table-header-group; } tbody tr { page-break-inside: avoid; } }，防止一行成绩被切到两页 - 移动端小屏下，避免固定宽度；用
table { width: 100%; table-layout: fixed; }配合td { word-break: break-word; }防文字溢出
结构对了，样式才可控；结构错了，调再多 CSS 都是补丁。成绩单不是排版游戏，是语义容器——th 是谁，td 是什么，机器和人都得一眼看清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
