用<table>布局日历必须先确定起始星期几，通过new Date(year, month, 1).getDay()计算前置空单元格；<thead>应写死星期标题以避免locale混乱；月末需补足42个<td>维持表格结构；跨日事件禁用colspan，宜改用绝对定位或CSS Grid。
用 <table> 布局日历必须先确定起始星期几
HTML 表格本身不识别日期逻辑，<table> 只负责按行、列渲染单元格。要让 1 号落在正确的列（比如周日列），必须手动计算当月 1 日是星期几，然后在表格第一行补足前置空单元格。
常见错误是直接从 1 号开始填，结果整个月错位——比如 2024 年 7 月 1 日是周日，那第一行第一个 <td> 就该是 1 号；但 2024 年 8 月 1 日是周三，就得在前面加 3 个空 <td>，让 1 号落到“周三”列。
JavaScript 中可用 new Date(year, month, 1).getDay() 获取星期索引（0=周日，1=周一…6=周六），再用循环生成对应数量的空 <td>。
<thead> 里写死星期标题比动态生成更稳
日历头部（周一到周日）一旦写死，后续所有月份都能复用同一套 <th> 结构，避免因 locale 或时区导致 “Mon/Tue” 和 “周一/周二” 混乱。尤其在纯静态 HTML 或服务端渲染场景下，硬编码 <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th> 最省事也最可控。
不要依赖 toLocaleDateString('zh-CN', { weekday: 'short' }) 动态生成——它可能返回 “周日” 或 “星期日”，长度不一，容易撑破列宽；且在 Node.js 环境中若未配置 ICU 数据，会 fallback 成英文。
立即学习“前端免费学习笔记（深入）”；
月末日期填满后，补空单元格到 42 格（6 行 × 7 列）
标准日历显示 6 行 × 7 列 = 42 天，哪怕某月只有 28 天（如平年 2 月），也要补够 42 个 <td>，否则表格结构塌陷、CSS 样式错乱。补空不是可选操作，是维持行列对齐的硬性要求。
- 算出当月总天数：
new Date(year, month + 1, 0).getDate() - 算出已填充单元格数：起始空格数 + 当月天数
- 剩余需补空数 =
42 - 已填充数，用<td></td>填满
漏补或少补会导致最后一行只有 5 列，CSS 的 table-layout: fixed 会强制拉伸，日期挤成一团——这是最常被忽略的视觉 bug。
用 colspan 和 rowspan 处理跨日事件会破坏网格稳定性
如果想在日历单元格里画一个横跨 3 天的会议块，直接给 <td> 加 colspan="3" 看似简单，但会打乱整行后续单元格的列序，导致下一行错位、CSS Grid 或 flex 布局失效。真实项目中，这种需求应改用绝对定位覆盖在表格之上，或彻底放弃 <table> 改用 <div> + CSS Grid。
纯展示型日历（只读、无事件）用 <table> 安全；只要涉及合并单元格、拖拽、点击区域不规则，<table> 就是技术债起点。
