HTML表格显示方块、问号或空字符，90%是编码不一致所致；若内容可读但错位塌陷，则多为邮件客户端忽略结构所致。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
确认乱码是编码问题还是结构解析失败
HTML 表格显示为方块、问号或“”字符，90% 是编码不一致导致的；但若表格内容能读、只是错位/塌陷，那大概率是邮件客户端或老旧渲染器把 <table> 当普通标签忽略了——比如 Outlook 2016 会直接丢弃 <code><colgroup></colgroup>，Gmail 会重置 <td> 的 <code>padding。先用浏览器开发者工具 Network 面板看响应头：Content-Type 是否含 charset=utf-8；再右键「查看页面源代码」，确认文件开头三字节不是 EF BB BF（即 UTF-8 BOM），否则可能触发 IE 兼容模式或 PHP 输出异常。
重构表格前必须统一三处编码声明
缺一不可，且必须完全一致：
-
<meta charset="UTF-8">必须放在最顶部，不能在<title></title>后面 - 保存 HTML 文件时选「UTF-8 without BOM」——VS Code 右下角点击编码名 → 「Save with Encoding」→ 「UTF-8」；Notepad++ 选「编码」→ 「转为 UTF-8 无 BOM 格式」
- 后端输出时强制 HTTP 头：PHP 加
header('Content-Type: text/html; charset=utf-8');；Nginx 配置加charset utf-8;；Apache .htaccess 加AddDefaultCharset UTF-8
若旧表格数据来自数据库，还要检查 MySQL 连接是否设了 SET NAMES utf8mb4，否则 SELECT 出来的中文仍是乱码字节流。
用语义化表格替代 div 布局并禁用 CSS Grid/Flex
邮件和部分企业内网系统（如 Lotus Notes）根本不识别 display: grid 或 display: flex，所有「表格感」布局必须用原生 <table> 实现：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>外层容器固定宽度：用 <code><table width="600" cellpadding="0" cellspacing="0">，不要写 <code>style="width:600px"
<td align="center" valign="top">，不用 <code>text-align 或 vertical-align CSS
<table> 宽 100%，内部每列用独立 <code><table> 控制宽度，避免 <code>colspan 跨太多列
<thead>/<code><tbody>，Outlook 会忽略它们的样式；表头统一用 <code><tr><td><strong>姓名</strong></td></tr>
示例片段：
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" align="left" valign="top"><strong>姓名</strong></td>
<td width="450" align="left" valign="top">张三</td>
</tr>
<tr>
<td align="left" valign="top"><strong>邮箱</strong></td>
<td align="left" valign="top">zhangsan@example.com</td>
</tr>
</table>
图片与中文混合时特别注意路径和字体回退
表格里插图+中文，最容易崩在两处：
-
<img src="crackle.png" alt="HTML怎么重构旧网页中的乱码表格" >必须用绝对路径或 CID 引用，相对路径在邮件中 100% 404；若走内联 base64，需确保编码后字符串不含换行符（data:image/png;base64,iVBORw...一行到底） - 中文字体不能依赖 Google Fonts 或
@import，只写font-family: "Microsoft YaHei", "PingFang SC", sans-serif;；避免用font-weight: bold，Outlook 会把它当无效声明直接剔除 - 表格单元格内中文换行失效？加
<div style="word-break: break-all;">超长中文文本</div>，别信white-space: normal
复杂点在于：有些老系统（如 IBM Notes）连 word-break 都不认，只能靠手动插入 <br> 或拆成多行 <td> ——这不是妥协，是现实约束。</td>
