考勤表必须采用“人×时间”结构，即员工为行、日期为列，否则会导致维护困难和统计错误；正确使用rowspan、colspan及语义化标签可提升可访问性与可维护性。
直接用 <table> 做考勤表没问题，但容易错在「行列逻辑反了」——考勤表本质是「人 × 时间」二维结构，必须把人放行、时间放列，否则后续加签到标记、统计缺勤会卡死。
<h3>考勤表的行列方向不能颠倒</h3>
<p>常见错误是把日期当行、员工当列，结果每加一天就得改整列 HTML，还无法横向滚动查看连续多日。正确做法是：</p>
<ul><li><code><tr> 每行代表一个员工（<code><th scope="row"> 标明）
<li><code><td> 每列代表一个日期（<code><th scope="col"> 标明）
<li>表头第一行固定为日期序列，用 <code>colspan 合并「姓名」「部门」等非日期列
这样导出 Excel 或用 JS 动态打勾时，遍历 rows[i].cells[j] 就天然对应「第 i 个人、第 j 天」。
rowspan 和 colspan 在考勤表里的真实用途
考勤表常需合并单元格来标注班次、节假日或请假类型，但滥用会导致 DOM 结构错乱。关键原则：
- 员工姓名列用
rowspan：避免重复写「张三」10 行，只在首行写，后面行留空 - 节假日标题用
colspan：比如「五一假期（5.1–5.5）」跨 5 列，但必须确保下方对应 5 个<td> 单元格存在 <li>绝对不要在 <code><tbody> 里对数据单元格用 <code>rowspan：会导致 JS 获取rows.length失真，统计缺勤天数出错示例片段：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件下载如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<tr> <br><th scope="row" rowspan="3">张三</th> <br><td>✓</td> <td>✓</td> <td>✓</td> <br> </tr><br><tr> <br><td>✓</td> <td>✓</td> <td>✗</td> <br> </tr>
语义化标签让考勤表可访问、可维护
很多考勤表只是视觉整齐，但屏幕阅读器读不出「张三 5 月 6 日缺勤」。必须补全语义：
- 用
<caption></caption>写清周期，如<caption>2026 年 5 月考勤汇总（5.1–5.31）</caption> - 员工列加
scope="row"，日期列加scope="col"，否则辅助技术无法关联人和日期 - 状态单元格避免只用图标 ✓/✗，至少加
aria-label="出勤"或title="出勤" - 不要用
bgcolor或内联style控制红绿底色——CSS 分离后方便按公司制度统一换主题
响应式考勤表的宽度陷阱
桌面端宽屏能塞下 31 列日期，手机上直接横向溢出。解决方法不是删列，而是：
- 给
<table> 包一层 <code><div style="overflow-x: auto">，强制横向滚动 <li>禁用 <code>table-layout: fixed，否则小屏下文字折行失效，日期被截断 - 日期列用
min-width: 60px，文字设white-space: nowrap防碎字 - 别信
width="100%"—— 它会让所有列均分，导致日期列太窄、姓名列太宽
复杂点在于：一旦引入横向滚动，
position: sticky固定表头或首列就失效，得用 JS 模拟，这点容易被忽略。 - 用
