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