html成绩单表格必须用定义列头、存放数据，成绩数字右对齐、姓名居中、单元格垂直居中，空单元格须标注“缺考”或“未录入”，窄屏下应允许水平滚动而非折行。
表格结构必须用 <table>、<code><thead>、<code><tbody> 显式划分
<p>直接写一堆 <code><tr><td> 容易语义混乱，屏幕阅读器和搜索引擎都难识别哪是标题行、哪是数据。成绩单里“姓名”“数学”“英语”这些是列头，得包在 <code><thead> 里，用 <code><th> 而不是 <code><td>；学生成绩数据全塞进 <code><tbody>。漏掉 <code><thead> 或混用 <code><th>/<code><td>，后期加排序、导出或响应式适配都会踩坑。
<p>示例片段：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<thead><tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>87</td>
<td>92</td>
<td>179</td>
</tr></tbody>
</table>
<h3>成绩数字要避免用纯文本对齐，用 CSS 控制 <code>text-align 和 vertical-align
默认 <td> 垂直居中、水平左对齐，姓名看着还行，但数字挤在左边会显得松散不整齐。成绩单需要右对齐数字、居中对齐姓名，且单元格上下居中才清爽。
<ul>
<li>给所有成绩列（如数学、英语）加 class="score"，CSS 写 <code>.score { text-align: right; }
.name { text-align: center; }
td, th { vertical-align: middle; }，避免文字贴顶或悬空<center></center> 或 <div style="text-align:..."> 套每格，维护成本高
<h3>空单元格不能留白，得用 <code> 或明确标注“缺考”“未录入”
HTML 表格里连续空格会被合并，纯空 <td></td> 渲染出来可能看不见边框、看不出有这一格，打印或导出 Excel 时更易丢数据。用户会以为数据丢了，而不是没填。
- 成绩未录入：用
<td>—</td>或<td>未录入</td> - 学生缺考：统一写
<td>缺考</td>，别用空或斜杠 - 绝对不要写
<td> </td>（带空格），浏览器仍当空白处理 - 如果后端返回 null，模板里得主动转成可读字符串，不能原样插进
<td> <h3>响应式窄屏下横向滚动比强行折行更可靠</h3> <p>手机上看七八列的成绩单，硬让列名换行（比如“数\n学”）或缩字体，字小到看不清，还容易错位。不如允许水平滚动，体验反而更可控。</p> <ul><li>给 <code><table> 外层套个 <code><div style="overflow-x: auto;"> <li>加 <code>table { min-width: 600px; }防止缩太小 - 别用
table-layout: fixed配百分比宽度——内容长度不一，会导致截断或撑破容器 - 真要适配小屏，优先考虑删减非核心列（如“备注”），而不是动结构
复杂点不在怎么画格子，而在谁看、在哪看、后续要不要导出或搜索。边框颜色、斑马纹、悬停效果都是次要的，先把语义、空值、窄屏这三处稳住，表才算真正可用。
