如何通过HTML表格展示物流节点？TR标签构建垂直进度列表-html教程-PHP中文网

单纯靠无法构建垂直物流节点，必须嵌套在中并用css控制视觉流向；单条轨迹推荐语义化，时间须用确保机器可读。

如何通过html表格展示物流节点？tr标签构建垂直进度列表

用 <tr> 实现垂直物流节点，关键在语义和结构 <p>直接说结论：单纯靠 <code><tr> 无法“构建”垂直进度列表——<code><tr> 是表格行容器，必须嵌套在 <code><table> 内，且天然按行排列；想实现垂直物流节点，得靠 CSS 控制视觉流向，而不是靠 <code><tr> 自身“变垂直”。否则容易写出语义混乱、屏幕阅读器无法理解的代码。 <h3>为什么不能只写 <code><tr> 就当进度条用 <p>常见错误是这样写：</p> <pre class="brush:php;toolbar:false;"><tr><td>已揽收</td></tr><tr><td>运输中</td></tr><tr><td>派件中</td></tr></pre> <p>这会触发 HTML 解析错误（<code><tr> 缺少父级 <code><table> 和 <code><tbody>），浏览器会自动补全，但结果不可控，样式难对齐，无障碍支持几乎为零。 <p>真正可行的做法是：用 <code><table> 包裹，再用 CSS 把每行视觉上“拉长+堆叠”，同时保留表格语义（比如物流时间、状态、操作人等字段可自然对齐）。 <ul><li>必须包含 <code><table>、<code><tbody>，否则 DOM 结构不合法 <li><code><tr> 本身不决定方向，方向由 <code>display: flex 或 `flex-direction: column` 在容器上控制（不是在 `<tr> 上） <li>若只需纯展示、无行列对齐需求，<code><ol></ol>` + `<li>` 更轻量、更语义化

用

<table> + CSS 实现可访问的垂直物流节点
<p>适用场景：需要横向对比多条物流记录（如不同运单的同一节点时间），或需导出为 Excel —— 这时表格语义有价值。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
														src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
													<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr&#8203;&#8203;oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr&#8203;&#8203;oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
												</div>
												<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<p>核心思路：让每个 <code><tr> 占满宽度，并用伪元素画连接线，状态文字左对齐，时间右对齐。
<pre class="brush:php;toolbar:false;">.logistics-table {
  border-collapse: collapse;
  width: 100%;
}
.logistics-table td {
  padding: 12px 16px;
  vertical-align: top;
}
.logistics-table tr:not(:last-child) td:first-child::after {
  content: '';
  display: block;
  height: 24px;
  border-left: 2px solid #e0e0e0;
  margin-left: 8px;
}</pre>
<p>对应 HTML：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table class="logistics-table"><tbody>
<tr>
<td>✅ 已揽收<br><small>2024-05-20 09:12</small>
</td>
    </tr>
<tr>
<td>? 运输中<br><small>2024-05-21 14:30</small>
</td>
    </tr>
<tr>
<td>? 派件中<br><small>2024-05-22 10:05</small>
</td>
    </tr>
</tbody></table>
<ul><li>每行 <code><tr> 对应一个物流节点，语义清晰
<li>连接线用 <code>::after

画在

<td> 内，避免额外标签干扰可访问性
<li>不要给 <code><tr> 设 <code>height

或 line-height 控制高度，用 padding 更稳定

若要高亮当前节点，加 class 到对应 <tr>，再通过后代选择器改 <code>td 样式

什么时候该放弃

<table> 改用语义化列表
<p>如果只是单条物流轨迹展示，没有列对齐、排序、导出需求，<code><table> 反而是过度设计。此时 <code><ol></ol>

是更自然的选择：

<ol class="logistics-list">
<li>✅ 已揽收 <time datetime="2024-05-20T09:12">2024-05-20 09:12</time>
</li>
  <li>? 运输中 <time datetime="2024-05-21T14:30">2024-05-21 14:30</time>
</li>
  <li>? 派件中 <time datetime="2024-05-22T10:05">2024-05-22 10:05</time>
</li>
</ol>

<ol></ol> 天然垂直、语义明确、屏幕阅读器会读出序号，CSS 控制也更简单（比如用 li::before 画圆点+连接线）。只有当你真需要表格能力时，才值得引入 <table> 和一堆 <code><tr>。 <p>真正容易被忽略的点：物流节点的时间字段一定要用 <code><time></time> 标签包裹并带 datetime 属性——这是机器可读的关键，比任何 CSS 效果都重要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！