布局日历仍合理，因其语义清晰、可访问性好；须用定义星期头，空单元格用占位并设aria-hidden，每个日期必须含data-date属性。
用 <table> 布局日历为什么仍合理
<p>纯 CSS Grid 或 Flex 实现日历更现代，但 <code><table> 在语义和可访问性上仍有优势：日历本质是行列对齐的二维时间数据表，屏幕阅读器天然理解 <code><table> 的行列关系。只要不滥用 <code>colspan/rowspan 破坏结构，它仍是可靠选择。
<thead> 里放星期头，别用 <code><tr> + <code><td> 硬写
<p>星期栏属于表头信息，必须用 <code><th>，且包裹在 <code><thead> 中。否则会丢失语义，影响键盘导航和读屏顺序。
<pre class="brush:php;toolbar:false;"><thead><tr>
<th scope="col">日</th>
<th scope="col">一</th>
<th scope="col">二</th>
<th scope="col">三</th>
<th scope="col">四</th>
<th scope="col">五</th>
<th scope="col">六</th>
</tr></thead></pre>
<ul>
<li>
<code>scope="col" 明确告诉辅助技术这是列头，不可省略
<thead> 里放星期头，别用 <code><tr> + <code><td> 硬写
<p>星期栏属于表头信息，必须用 <code><th>，且包裹在 <code><thead> 中。否则会丢失语义，影响键盘导航和读屏顺序。
<pre class="brush:php;toolbar:false;"><thead><tr>
<th scope="col">日</th>
<th scope="col">一</th>
<th scope="col">二</th>
<th scope="col">三</th>
<th scope="col">四</th>
<th scope="col">五</th>
<th scope="col">六</th>
</tr></thead></pre>
<ul>
<li>
<code>scope="col" 明确告诉辅助技术这是列头，不可省略
<td> 替代 <code><th> —— 即使加了 <code>aria-label，语义完整性也打折扣
每月第一天前的空格单元格要靠 <td> 占位，不是用 <code> 或 margin
日历网格要求每周 7 列对齐。若某月 1 号是周三，则前两列需为空白单元格，否则后续日期会错位、被读作“无效日期”。
- 用真实
<td> 元素占位，内容可为空（<code><td></td>），或加aria-hidden="true"避免读屏干扰 - 绝对不要用
padding、margin或伪元素模拟空白 —— 这会让表格结构失真，打印或缩放时易崩 - 空单元格的
tabindex="-1"可防止键盘焦点落入无意义位置 - 每个日期
<td> 加 <code>data-date="2024-07-15"（ISO 格式），JS 和 CSS 都能直接用 - 避免
data-day="15" data-month="7"拆分存储 —— 容易遗漏年份，跨年场景失效 - 如果需要高亮今日，用
class="today"+data-date双保险，不单靠 class 名判断逻辑
当月日期单元格必须带 data-date 属性，别只靠文本内容推断
用户点击“15”无法知道这是几月几日，DOM 文本不包含上下文。靠 JS 解析所在行/列推算日期既脆弱又难维护。
最易被忽略的是空单元格的语义处理和 data-date 的强制绑定 —— 表格结构看似简单，但缺失这两点，日历就只是个好看但不可靠的视觉栅格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
