本身不定义标准数据格式,仅作语义容器;标准数据需通过(日期/时间)、(任意结构化值)等内联元素及其datetime/value属性显式标注,方能被机器识别与正确导出。

为什么 <td> 不能直接“填入标准数据”
<p>HTML 中的 <code><td> 标签本身只是语义容器,不定义“标准数据”格式——它只负责说“这是表格里的一个普通单元格”。所谓“标准数据”,实际取决于你用什么方式往里塞内容:纯文本、数字、带单位的字符串、日期字符串、甚至嵌套的 <code><time></time> 或 <data></data> 元素。浏览器不会校验 <td> 里是不是“标准值”,只管渲染。
<ul>
<li>常见错误现象:<code><td>2024-03-15</td> 看似是标准日期,但对机器而言只是字符串;搜索/排序/导出时无法被识别为日期类型
<td><time datetime="2024-03-15">2024-03-15</time></td>,此时 datetime 属性才提供机器可读的标准值<td>,而是它内部的结构或属性
<h3><code><td> 里该用 <code><data></data> 还是 <time></time>?
选哪个取决于你要承载的数据类型和用途。HTML5 提供了语义化内联元素来补充 <td> 的“标准性”,但它们不是必须的,用了才有额外价值。
<ul>
<li>
<code><time></time> 专用于日期/时间:支持 datetime 属性(ISO 8601 格式),被屏幕阅读器、搜索引擎、日历插件识别。例如:<td><time datetime="2024-03-15T09:30">3月15日 上午9:30</time></td>
<data></data> 适用于任意结构化值,需配 value 属性:比如产品编号、状态码、货币金额。例如:<td><data value="A2024-001">订单#A2024-001</data></td>
<data value="2024-03-15"></data> 不如 <time datetime="2024-03-15"></time> 语义准确;反过来,用 <time></time> 包非时间内容(如“已完成”)属于误用表格导出 Excel 时 <td> 里的语义标签会丢失吗?
<p>绝大多数前端导出库(如 SheetJS / xlsx.js)默认只取 <code><td> 的 <code>textContent,也就是最内层的纯文本内容,<time></time> 和 <data></data> 的属性值(datetime、value)不会自动写入 Excel 单元格的“值”或“自定义属性”中。
- 如果你导出后需要 Excel 能识别日期为真正的日期类型(而非文本),得手动提取
<time></time> 的 datetime 属性,再传给 SheetJS 的 v(value)字段,并设 t: 'd' 类型
- 同理,
<data value="123.45"></data> 的 value 可用来替代显示文本做数值导出,避免“¥123.45”被当作文本处理
- 简单粗暴的导出(如
innerHTML 转 CSV)一定丢属性——这时候“标准数据”就真的只剩肉眼可见的文本了
用 JavaScript 动态填充 <td> 时要注意什么
<p>动态生成表格时,最容易忽略的是属性与内容的同步。光 innerHTML 一塞,语义就断了。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档(.doc、.docx)转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>别这样写:<code>td.innerHTML = '<time>' + dateStr + '</time>' —— datetime 属性没设,机器依然看不懂
<time></time> 的 datetime 属性,再传给 SheetJS 的 v(value)字段,并设 t: 'd' 类型<data value="123.45"></data> 的 value 可用来替代显示文本做数值导出,避免“¥123.45”被当作文本处理innerHTML 转 CSV)一定丢属性——这时候“标准数据”就真的只剩肉眼可见的文本了<td> 时要注意什么
<p>动态生成表格时,最容易忽略的是属性与内容的同步。光 innerHTML 一塞,语义就断了。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档(.doc、.docx)转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>别这样写:<code>td.innerHTML = '<time>' + dateStr + '</time>' —— datetime 属性没设,机器依然看不懂
const timeEl = document.createElement('time');
timeEl.dateTime = isoDate;
timeEl.textContent = displayDate;
td.appendChild(timeEl);
<time :datetime="item.date"></time>),而不是把属性拼进字符串里textContent 或 setAttribute 比直接拼 HTML 安全;若必须插入 HTML,请严格过滤或使用 DOMPurify
<td> 标签上,而在它包裹的内容结构、属性值、以及上下游系统是否约定好怎么读这些属性。漏掉 <code>datetime 或 value,或者导出时不主动提取,前面所有语义努力就等于白做。










