用纯html表格做日程表最轻量且语义准确，关键在于合理组织时间与日期结构、正确使用colspan/rowspan、添加caption和scope提升可访问性，并通过css实现响应式适配。
用 <table> 做日程表，别套样式框架
<p>纯 HTML 表格完全够用，加点 CSS 就能清晰可读。不需要引入 Bootstrap 或 Tailwind——尤其当只要展示固定周/日程、不需交互时，<code><table> 是最轻量、语义最准的选择。
<p>关键不是“怎么画格子”，而是怎么组织数据结构：横向是时间（如 8:00–9:00），纵向是日期（如周一至周五），或者反过来。选哪种取决于你打印/查看场景——横向时间更符合人阅读日程的习惯。</p>
<ul><li>用 <code><thead> 固定第一行（时间槽）或第一列（日期），避免滚动错位
<li><code><th> 必须只用于表头，不要用 <code><td> 冒充；屏幕阅读器靠这个识别结构
<li>空单元格写 <code> 而非留白，否则可能被浏览器折叠成看不见的缝隙
colspan 和 rowspan 控制跨时段事件
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”面板，看单元格是否真对齐——别只信眼睛 <h3>用 <code><caption></caption>和scope属性提升可访问性日程表不是图片，视障用户靠屏幕阅读器“听”表格。没有
<caption></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></caption>会变成首行文字，比手动加标题更可靠
响应式窄屏下用
display: block重构表格流手机上看 7 列日程表？横向滚动是最后手段。更稳妥的是用 CSS 把表格“打散”：让每行变成一个卡片块，时间+内容垂直堆叠。这不是 hack，而是现代 CSS 对表格的合法重排。
核心是给
<table> 加 <code>display: block，再把<tr> 设为 <code>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 本就是描述性语言，让它干好本职就行。</div> -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
