HTML 表格结构变得扁平化答案

【问题标题】：HTML table structure is getting flattenedHTML 表格结构变得扁平化
【发布时间】：2017-04-22 14:11:29
【问题描述】：

看，强大的互联网！我正在编写电子邮件（啊！），显然这意味着比我十年来写的更多的表格。除了一些已弃用的属性如何被忽略之外，浏览器似乎还扁平化了表格的结构。

所以，假设我有these tables here。第一个按预期输出，2 列布局。第二个没有。添加 tr 和 td 元素来包含单元格的内部实际上会破坏布局。

要看到它发生，请检查结果输出。你会注意到第二个表变成了一堆tr 标签。控制宽度的td：

<td width="264" valign="top"></td>

呈现为一个空元素，而不是包含其子 tr 和 td 标签。

我的问题：有人知道为什么会这样吗？

编辑：作为参考，W3C 验证器抱怨 stray end tags，但他们正确地关闭了一些东西。这个 HTML 是从 Pug 模板自动生成的，我不认为它是无效的。

【问题讨论】：

标签： html email html-table html-email

【解决方案1】：

简单的错误 - 准备一张脸。

您忘记启动嵌套表格，也就是您忘记在新的 TR 标签之前在内部表格上放置表格标签。

使用嵌套表时，结构需要为 TABLE - TR - TD - TABLE - TR - TD - CONTENT。

您之前有：TABLE - TR - TD - TR - TD - CONTENT - 这会导致您的代码尝试自行更正并将 TR 移动到有效格式中，从而产生您所经历的怪异现象。

更正后的 HTML 见下文：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table width="600" cellpadding="0" cellspacing="24" border="0">
    <tr>
      <td width="264" valign="top">
        <h3>Alles auf einen Blick</h3>
        <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p>
        <button>Jetzt informieren</button>
      </td>
      <td width="264" valign="top">
        <h3>Schnell zur Lösung</h3>
        <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p>
        <button>Jetzt entdecken</button>
      </td>
    </tr>
  </table>

  <hr>

  <table width="600" cellpadding="0" cellspacing="24" border="0">
    <tr>
      <td width="264" valign="top">
        <table width="100%">
          <tr>
          <td>
            <h3>Alles auf einen Blick</h3>
          </td>
        </tr>
        <tr>
          <td>
            <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p>
          </td>
        </tr>
        <tr>
          <td>
            <button>Jetzt informieren</button>
          </td>
        </tr>
          </table>
      </td>
      <td width="264" valign="top">
        <table width="100%">
          <tr>
          <td>
            <h3>Schnell zur Lösung</h3>
          </td>
        </tr>
        <tr>
          <td>
            <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p>
          </td>
        </tr>
        <tr>
          <td>
            <button>Jetzt entdecken</button>
          </td>
        </tr>
          </table>
      </td>
    </tr>
  </table>
</body>
</html>

【讨论】：

所以你不能在td标签内有tr？您需要额外的table 作为容器吗？
是的，这是合法的。我添加了额外的table 标签，它可以工作。 :facepalm: