HTML table 结构变得扁平化

Question

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

的结构

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

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

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

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

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

编辑：作为参考，W3C 验证器抱怨 杂散结束标记 ，但他们正在正确关闭某些内容。这个 HTML 是从 Pug 模板自动生成的，我不认为它是无效的。

Answer 1

一个简单的错误 - 准备一个脸掌。

您忘记启动嵌套 table，也就是您忘记在内部 table 新 TR 标签之前放入一个 table 标签。

当您使用嵌套 table.

时，结构需要 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>

HTML table 结构变得扁平化

HTML table structure is getting flattened

html

email

html-table

html-email