日程表应以时间轴为第一列、会场为其余列，用合并单元格处理跨时段内容，禁用固定表格布局，响应式下转卡片流并保障无障碍语义。
表格结构要匹配日程逻辑，别用 <table> 堆砌时间点<p>会议日程不是普通数据表，它天然带有时序和分组特征。直接用 <code><tr><td> 一行一行硬排，很快会卡在“同一时段多个议题”或“跨时段演讲”上。正确做法是把「时间轴」作为第一列，其余列为会议室/分会场/主会场，每个单元格放对应议程项。<p>常见错误：把“09:00–09:15 开幕式”拆成两列（开始时间、结束时间），导致排序混乱、无法横向对齐其他场次。实际应合并为单个 <code><td>，用换行或 <code><br> 分隔内容。- 用
<thead> 固定时间列和标题行，避免滚动时表头丢失<li>跨时段内容用 <code>rowspan，比如主旨报告占两小时，就设 rowspan="2"，但注意后续行必须跳过对应单元格
- 避免给每个
<td> 加固定宽度——不同议题长度差异大，用 <code>min-width + white-space: normal 更稳妥移动端适配失败，往往因为没处理好列宽和溢出
桌面端能并排显示 4 个会场，手机上强行压缩只会文字重叠或横向滚动难操作。单纯加 viewport meta 不解决问题。
实操建议优先用响应式断点隐藏次要列（如“技术支持备注”），而非缩放整个表格。更关键的是：把多列结构转为卡片流——每条时间行变成一个 <section></section>，内部用 <div class="session"> 并列显示各会场内容。<ul><li>用 <code>@media (max-width: 768px) 切换显示模式，桌面用 <table>，手机用语义化块级结构<li>禁用 <code>table-layout: fixed，否则小屏下文本截断不可控
- 如果必须保留表格，给
<td> 加 <code>overflow-wrap: break-word，而不是依赖 word-break: break-all（后者会切开英文单词）
colspan 和 rowspan 混用时，行数计算容易错
日程表里常有“茶歇”“午餐”这类横跨所有会场的公共时段，需用 colspan；也有“嘉宾访谈”这种只在主会场、持续三时段的安排，需用 rowspan。两者叠加时，HTML 解析器按“当前行已占位数”计数，不是按视觉格子数。
例如：一行有 5 列，第 2 列设 colspan="3"，那它实际占第 2、3、4 列，第 5 列仍需显式写出 <td>，否则该行总列数不足，浏览器会自动补空单元格，导致后续行错位。<ul><li>用浏览器开发者工具的“元素高亮”功能实时验证行列对齐，比肉眼数 <code><td> 可靠<li>
<code>rowspan 值等于它要覆盖的**物理行数**，不是时间长度。09:00–10:00 和 10:00–11:00 若各占一行，则跨这两段需 rowspan="2"
- 避免在同一个
<tr> 中混用 <code>colspan 和 rowspan——可读性差，且部分旧版 IE 渲染异常无障碍访问常被忽略，但会议日程恰恰最需要
参会者可能用屏幕阅读器快速定位“下午茶歇在哪一栏”，或靠键盘 Tab 跳转到自己报名的分会场。纯靠 CSS 视觉分组无法传递这些信息。
核心是让表格具备语义层级：用 <caption></caption> 说明日程范围（如“2024 技术峰会 - 10月15日全天”），用 <th scope="col"> 标明会场名，用 <code><th scope="row"> 标明时间点。这样屏幕阅读器才能正确播报“14:00 主会场：架构演进实践”。<ul>
<li>禁用仅靠颜色区分状态（如“进行中”标红），必须搭配图标或文字标签</li>
<li>避免用 <code><div> 模拟表格——即使加了 <code>role="table"，也无法被所有读屏软件识别为真表格
- 每个议程单元格内，讲者姓名、职务、所属机构用
<small></small> 或 <span class="speaker-meta"></span> 包裹，方便辅助技术提取关键字段
实际做起来，最难的不是写几行 <tr><td>，而是决定哪些信息该纵向分组、哪些该横向并列，以及当某场次临时调整时，如何最小改动 HTML 结构。多数人卡在第一次删掉“完美对齐”的执念，接受时间轴作为唯一主维度。</td></tr>
<thead> 固定时间列和标题行，避免滚动时表头丢失<li>跨时段内容用 <code>rowspan，比如主旨报告占两小时，就设 rowspan="2"，但注意后续行必须跳过对应单元格<td> 加固定宽度——不同议题长度差异大，用 <code>min-width + white-space: normal 更稳妥移动端适配失败，往往因为没处理好列宽和溢出
桌面端能并排显示 4 个会场，手机上强行压缩只会文字重叠或横向滚动难操作。单纯加 viewport meta 不解决问题。
实操建议优先用响应式断点隐藏次要列（如“技术支持备注”），而非缩放整个表格。更关键的是：把多列结构转为卡片流——每条时间行变成一个 <section></section>，内部用 <div class="session"> 并列显示各会场内容。<ul><li>用 <code>@media (max-width: 768px) 切换显示模式，桌面用 <table>，手机用语义化块级结构<li>禁用 <code>table-layout: fixed，否则小屏下文本截断不可控
<td> 加 <code>overflow-wrap: break-word，而不是依赖 word-break: break-all（后者会切开英文单词）
colspan 和 rowspan 混用时，行数计算容易错
日程表里常有“茶歇”“午餐”这类横跨所有会场的公共时段，需用 colspan；也有“嘉宾访谈”这种只在主会场、持续三时段的安排，需用 rowspan。两者叠加时，HTML 解析器按“当前行已占位数”计数，不是按视觉格子数。
例如：一行有 5 列，第 2 列设 colspan="3"，那它实际占第 2、3、4 列，第 5 列仍需显式写出 <td>，否则该行总列数不足，浏览器会自动补空单元格，导致后续行错位。<ul><li>用浏览器开发者工具的“元素高亮”功能实时验证行列对齐，比肉眼数 <code><td> 可靠<li>
<code>rowspan 值等于它要覆盖的**物理行数**，不是时间长度。09:00–10:00 和 10:00–11:00 若各占一行，则跨这两段需 rowspan="2"
<tr> 中混用 <code>colspan 和 rowspan——可读性差，且部分旧版 IE 渲染异常无障碍访问常被忽略，但会议日程恰恰最需要
参会者可能用屏幕阅读器快速定位“下午茶歇在哪一栏”，或靠键盘 Tab 跳转到自己报名的分会场。纯靠 CSS 视觉分组无法传递这些信息。
核心是让表格具备语义层级：用 <caption></caption> 说明日程范围（如“2024 技术峰会 - 10月15日全天”），用 <th scope="col"> 标明会场名，用 <code><th scope="row"> 标明时间点。这样屏幕阅读器才能正确播报“14:00 主会场：架构演进实践”。<ul>
<li>禁用仅靠颜色区分状态（如“进行中”标红），必须搭配图标或文字标签</li>
<li>避免用 <code><div> 模拟表格——即使加了 <code>role="table"，也无法被所有读屏软件识别为真表格
<small></small> 或 <span class="speaker-meta"></span> 包裹，方便辅助技术提取关键字段实际做起来，最难的不是写几行 <tr><td>，而是决定哪些信息该纵向分组、哪些该横向并列，以及当某场次临时调整时，如何最小改动 HTML 结构。多数人卡在第一次删掉“完美对齐”的执念，接受时间轴作为唯一主维度。</td></tr>
