如何使用HTML表格制作项目进度里程碑-html教程-PHP中文网

应使用语义化html表格呈现里程碑，核心是可读、可维护、可导出：用++结构，控制列宽，日期统一yyyy-mm-dd格式并用标注，状态用简洁文字，问题描述用保留换行，禁用合并单元格与内联样式以保障excel导出兼容性。

如何使用html表格制作项目进度里程碑

用

<table> 表格直接呈现里程碑，别画甘特条<p>纯 HTML 表格做里程碑，核心不是“可视化”，而是“可读、可维护、可导出”。甘特图适合展示工期和并行关系，但里程碑本身是离散时间点，强行用条形图反而模糊重点。直接用表格列清编号、名称、计划/实际时间、状态和问题，比嵌套一堆 <code><div> 模拟横道更可靠，也更容易被邮件、微信、打印场景兼容。<p>常见错误是把表格当画布：合并单元格对齐日期轴、用空格撑开进度条、手动写 <code><span style="background:green"></span>

表示完成——这些在不同设备或复制粘贴时极易错位或丢失样式。

只用语义化表格结构：<table> + <code><thead> + <code><tbody>，不依赖 CSS 定宽来对齐列<li>日期字段统一用 <code>YYYY-MM-DD 格式（如 2026-09-15），避免浏览器解析歧义
状态列用简洁文字：已延期、已通过、待审批，不用颜色替代含义（色盲用户/黑白打印失效）
“问题描述”列允许换行，用 <td><pre class="brush:php;toolbar:false;">...</pre></td> 保留缩进和换行，比 <br> 更稳定

`<colgroup></colgroup>` 控制列宽，防止内容挤塌

项目表格最常崩坏的点，是“里程碑名称”列过长导致整行错位，或“备注”列把其他列压成窄条。CSS 的 table-layout: fixed 配合 <colgroup></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> 之前；一旦设了 <code>fixed，单元格内容超出宽度会自动折行，不溢出。

用 `datetime` 属性存时间，方便 JS 后续处理

如果表格要支持动态计算（比如标红超期项、自动算偏差天数），光靠文本日期不够。必须给时间单元格加上机器可读的 datetime 属性，否则 JS 只能靠正则去猜格式，极不可靠。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确写法：

<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></time> 标签本身语义清晰，对屏幕阅读器友好。