用纯HTML表格做日程表最轻量且语义准确，关键在于合理组织时间与日期结构、正确使用colspan/rowspan、添加caption和scope提升可访问性，并通过CSS实现响应式适配。
用 <table> 做日程表，别套样式框架
纯 HTML 表格完全够用，加点 CSS 就能清晰可读。不需要引入 Bootstrap 或 Tailwind——尤其当只要展示固定周/日程、不需交互时，<table> 是最轻量、语义最准的选择。
关键不是“怎么画格子”，而是怎么组织数据结构：横向是时间（如 8:00–9:00），纵向是日期（如周一至周五），或者反过来。选哪种取决于你打印/查看场景——横向时间更符合人阅读日程的习惯。
- 用
<thead>固定第一行（时间槽）或第一列（日期），避免滚动错位 -
<th>必须只用于表头，不要用<td>冒充；屏幕阅读器靠这个识别结构 - 空单元格写
colspan 和 rowspan 控制跨时段事件
开会从 10:00 到 11:30？不能硬塞进一个 30 分钟格子。得用 colspan（横向合并）或 rowspan（纵向合并）拉伸单元格，否则视觉和语义都会错乱。
比如每格代表 30 分钟，那 90 分钟会议就要占 3 格：<td colspan="3">项目评审</td>。但注意：colspan 数值必须严格匹配实际列数，多 1 少 1 都会导致后续整行错位。
立即学习“前端免费学习笔记（深入）”；
- 跨行事件（如全天出差）优先用
rowspan，但要确保该列其他行没内容，否则会覆盖 - 避免嵌套
colspan+rowspan，极难调试，可拆成多个独立单元格+CSS背景色模拟合并效果 - 用浏览器开发者工具检查
<table>的“Layout”面板，看单元格是否真对齐——别只信眼睛
用 <caption> 和 scope 属性提升可访问性
日程表不是图片，视障用户靠屏幕阅读器“听”表格。没有 <caption>，他们不知道这是“技术部第23周日程”还是“餐厅菜单”。没有 scope，读到“14:00”时无法判断对应哪天。
正确写法：<caption>2024年6月17日–21日团队日程</caption>，并在表头加 scope="col" 或 scope="row"：
<th scope="col">时间</th> <th scope="col">周一</th> <th scope="col">周二</th> <tr> <th scope="row">09:00–09:30</th> <td> </td> <td>需求对齐</td> </tr>
-
scope="col"用于列标题（如“周一”），scope="row"用于行标题（如“09:00–09:30”） - 不要用
abbr简写表头（如<th abbr="Mon">周一</th>），多数阅读器不支持 - 如果导出为 Excel，
<caption>会变成首行文字，比手动加标题更可靠
响应式窄屏下用 display: block 重构表格流
手机上看 7 列日程表？横向滚动是最后手段。更稳妥的是用 CSS 把表格“打散”：让每行变成一个卡片块，时间+内容垂直堆叠。这不是 hack，而是现代 CSS 对表格的合法重排。
核心是给 <table> 加 display: block，再把 <tr> 设为 display: flex 或 display: block，配合媒体查询：
@media (max-width: 480px) {
table { display: block; }
tbody, tr, th, td { display: block; }
th:first-child, td:first-child { font-weight: bold; }
}
- 别用
overflow-x: auto包裹表格——它会让焦点键盘导航失效，且放大后字体糊 - 移动端优先设计的话，直接按“每日一张表”组织 HTML，比强行响应式更稳定
- 测试时真机横竖屏切换，看是否出现隐藏滚动条或文字截断——模拟器容易漏掉
表格结构越简单，后期改版越省事。别为了“看起来高级”加多余 <div> 嵌套，也别用 JS 动态生成基础日程——HTML 本就是描述性语言，让它干好本职就行。
