正确做法是将代码用嵌套包裹后放入表格单元格，其中保留换行与空格，提供语义并支持语法高亮，二者缺一不可，且class须加在上。

表格单元格里直接写

 会塌成一行

在 <td> 或 <code><th> 里只放 <code><code> 标签，哪怕里面写了三行带缩进的 JS，浏览器也会把换行和多余空格全压成单个空格——结果是 function foo() { return true; } 这样挤在一起，根本看不出结构。

原因很简单：<code> 是行内元素，它只负责语义（“这是代码”），不负责格式。表格单元格默认也不保留空白符。

• 别指望 CSS 的 white-space: pre 临时救场——它可能被表格样式覆盖，且语义缺失，屏幕阅读器读不出“这是代码块”
• 更别把整段代码当纯文本塞进 <td>，没标签包裹，搜索引擎和语法高亮工具都认不出来 <li>如果代码含 <code>、<code>>、&，不转义会直接被解析成 HTML 标签，轻则内容错位，重则脚本执行或 DOM 截断

<pre class="brush:php;toolbar:false;"> 必须完整嵌套在 <td> 内部
<p>正确做法是把 <code><pre class="brush:php;toolbar:false;"><code>...</code>

当作一个整体放进单元格，而不是只包一层。



使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• <pre class="brush:php;toolbar:false;"></pre> 负责保留换行和空格，<code> 提供语义，二者缺一不可
• 写法必须是 <td><pre class="brush:php;toolbar:false;">&lt;code class=&quot;js&quot;&gt;...&lt;/code&gt;</pre></td>，顺序不能反，也不能漏掉任一闭合标签
• class 属性（如 language-js）要加在 <code> 上，不是 <pre class="brush:php;toolbar:false;"></pre>，否则 highlight.js 等工具无法识别语言

表格中

<pre class="brush:php;toolbar:false;"> 的样式容易被继承干扰

表格默认有 border-collapse、<code>vertical-align 和单元格 padding，这些会挤压 <pre class="brush:php;toolbar:false;"></pre> 的内部空间，导致代码贴边、文字发虚或垂直居中异常。

• 给 <pre class="brush:php;toolbar:false;"></pre> 加 margin: 0 和 padding: 8px，避免被表格 padding 吞掉首尾行
• 强制等宽字体：在 pre code 上设 font-family: ui-monospace, 'SFMono-Regular', monospace
• 长代码必须横向滚动：pre { overflow-x: auto; white-space: pre; }，否则会撑破表格列宽
• 别给 <td> 设 <code>text-align: center——会让整段代码居中，破坏缩进对齐

  动态渲染时 HTML 实体转义不能省

  从 JS 拼接字符串插入表格，或后端模板输出，只要代码里有 、<code>>、&，就必须提前转义。比如 <div> 得写成 <code><div>，否则浏览器解析到第一个 就开始找匹配的闭合标签，后续内容全乱。 <ul> <li>Node.js 用 <code>he.escape()，PHP 用 htmlspecialchars()，前端手动拼接时优先用 textContent 赋值再取 innerHTML

• 别依赖 Prism.js 或 highlight.js 自动转义——它们只做高亮，不处理 XSS 风险
• 复制 IDE 代码进 HTML 文件时，确认编辑器没自动把 Tab 转成空格不一致（推荐统一用 2 或 4 个空格缩进）
表格里放代码最麻烦的不是写法，而是缩进一致性 + 实体转义 + 样式隔离这三点同时出问题时，很难一眼定位是哪环崩了。