应使用语义化HTML表格呈现里程碑，核心是可读、可维护、可导出：用<table>+<thead>+<tbody>结构，<colgroup>控制列宽，日期统一YYYY-MM-DD格式并用<time datetime>标注，状态用简洁文字，问题描述用<pre>保留换行，禁用合并单元格与内联样式以保障Excel导出兼容性。
用 <table> 表格直接呈现里程碑，别画甘特条
纯 HTML 表格做里程碑，核心不是“可视化”，而是“可读、可维护、可导出”。甘特图适合展示工期和并行关系，但里程碑本身是离散时间点，强行用条形图反而模糊重点。直接用表格列清编号、名称、计划/实际时间、状态和问题，比嵌套一堆 <div> 模拟横道更可靠，也更容易被邮件、微信、打印场景兼容。
常见错误是把表格当画布：合并单元格对齐日期轴、用空格撑开进度条、手动写 <span style="background:green"></span> 表示完成——这些在不同设备或复制粘贴时极易错位或丢失样式。
- 只用语义化表格结构：
<table>+<thead>+<tbody>，不依赖 CSS 定宽来对齐列 - 日期字段统一用
YYYY-MM-DD格式（如2026-09-15），避免浏览器解析歧义 - 状态列用简洁文字：
已延期、已通过、待审批，不用颜色替代含义（色盲用户/黑白打印失效） - “问题描述”列允许换行，用
<td><pre>...</pre></td>保留缩进和换行，比<br>更稳定
<colgroup> 控制列宽，防止内容挤塌
项目表格最常崩坏的点，是“里程碑名称”列过长导致整行错位，或“备注”列把其他列压成窄条。CSS 的 table-layout: fixed 配合 <colgroup> 是唯一可控方案，而不是靠 width 属性硬塞。
示例片段：
立即学习“前端免费学习笔记（深入）”；
<colgroup> <col width="60"> <!-- 编号 --> <col width="180"> <!-- 名称 --> <col width="100"> <!-- 计划时间 --> <col width="100"> <!-- 实际时间 --> <col width="120"> <!-- 状态 --> <col width="200"> <!-- 问题描述 --> <col width="80"> <!-- 责任人 --> </colgroup>
注意：width 值是像素，不是百分比；所有 <col> 必须放在 <thead> 之前；一旦设了 fixed，单元格内容超出宽度会自动折行，不溢出。
用 datetime 属性存时间，方便 JS 后续处理
如果表格要支持动态计算（比如标红超期项、自动算偏差天数），光靠文本日期不够。必须给时间单元格加上机器可读的 datetime 属性，否则 JS 只能靠正则去猜格式，极不可靠。
正确写法：
<td data-label="计划完成时间"> <time datetime="2026-08-20">2026-08-20</time> </td> <td data-label="实际完成时间"> <time datetime="2026-08-18">2026-08-18</time> </td>
这样 JS 就能直接用 new Date(cell.querySelector('time').dateTime) 解析，不用再适配 2026/08/20 或 2026年8月20日 等变体。同时 <time> 标签本身语义清晰，对屏幕阅读器友好。
导出为 Excel 时保留格式的关键细节
很多团队最终要把 HTML 表格粘贴进 Excel 汇总——这时你会发现合并单元格消失、日期变成数字、中文乱码。根本原因不是 Excel 问题，而是 HTML 表格没按规范写。
- 禁用
border-collapse: collapse，Excel 不识别该 CSS，会导致边框丢失 - 不要用
<span>包裹单元格内容，Excel 导入时会忽略内联样式 - 中文列标题用标准 UTF-8，且在
<meta charset="UTF-8">前置声明 - “责任人”“审批状态”这类固定选项列，值保持简短（如
张工、已审批），避免含换行或斜杠，否则 Excel 会拆成多列
真正需要图形化展示时，就该切到 ECharts 或专用工具；HTML 表格的使命，是把里程碑数据稳稳地钉在那儿，不丢、不错、不歧义。
