在 <table> html 电子邮件中嵌套 <table>

Question

我在这里完全不知所措。我想在 html 电子邮件的居中 table 中嵌套多个 table，并且 firebug 和 W3C 验证器都告诉我我有更多空缺 table标签比结束 table 标签。 firebug 中的测试显示包含 table 与嵌套 table 之前一样，而不是包围它们。

如果我将包含的 <table> 更改为 <div>，所有问题都会消失。不知道哪里出了问题。

这是有问题的 html 电子邮件：http://coastmusic.com/optiweb/

Answer 1

你目前有容器 table:

<table width="600" cellpadding="0" cellspacing="0" align="center">
  <table width="600" cellpadding="0" cellspacing="0" align="center">

您需要在容器后添加 tr 和 td 标签 table

<table width="600" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <table width="600" cellpadding="0" cellspacing="0" align="center">

还要添加适当的结束标记。

Answer 2

我清理了你的代码。正如 Gwesolo 所说，你的桌子周围需要一些 tr 和 td。

<!DOCTYPE html>
<html>
<head>
<title>Elixir OPTIWEB Coating</title>
</head>
<body bgcolor="#E9EAEA">
<table width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
    <td width="100%" align="center">
    <table width="600" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="assets/header.jpg" />
        </td>
    </tr>
    <tr>
        <td align="center"><img src="assets/packaging-eyecandy.jpg" />
        </td>

    </tr>
    <tr>
        <td style="background-color: #282727; color: #FFF;">
            <h1 style="font-size: 18px; font-family: sans-serif; margin-bottom: 0; padding: 5px 5px 0 5px;">INTRODUCING OPTIWEB&trade; COATING</h1>

            <p style="font-size: 12px; font-family: sans-serif; padding: 0 5px 5px 5px; margin-top: 5px;">Elixir&reg; OPTIWEB Coated Electric Guitar Strings feature a crisp tone that sounds indistinguishable from uncoated strings and a more natural familiar feel than both NANOWEB&reg; and POLYWEB&reg; Coated Strings without sacrificing the extended tone life that players have come to expect from Elixir Strings.</p>

        </td>
    </tr>
</table>
<!--2 column-->
<table width="600" cellpadding="0" cellspacing="0" style="background-color: #FFF; padding-bottom: 20px;" align="center">
    <tr>
        <td><img style="margin-top: 10px;" src="assets/string-closeup.jpg" />
        </td>

        <td>
            <h2 style="font-size: 14px; font-family: sans-serif; margin-top: 5px; margin-bottom: 0; padding-left: 10px; padding-right: 10px;">Unlike other string brands, Elixir Strings coats the whole string</h2>

            <p style="font-size: 12px; font-family: sans-serif; margin-top: 5px; margin-bottom: 5px; padding-left: 10px; padding-right: 10px;">The NANOWEB, POLYWEB and OPTIWEB Coatings not only protect the outer string surface, but also the gaps between the windings where tone-deadening debris typically builds up in other brands' coated and uncoated guitar strings. Anti-Rust Plating on plain steel strings ensures longer tone life for the entire set.</p>

            <a target="_blank" style="display: block;" href="https://www.youtube.com/watch?v=OC6DegDso2Y"><img src="assets/yt-link.jpg" />
            </a>

        </td>
    </tr>
</table>
<!--1 column-->
<table width="600" cellpadding="0" cellspacing="0" style="background-color: #FFF;" align="center">
    <tr>
        <td align="center">
            <hr style="margin: 5px;" />
            <h2 style="font-size: 18px; font-family: sans-serif; margin-bottom: 0; margin-top: 5px; padding-left: 10px; padding-right: 10px;">The range to meet the playing style of every electric guitarist</h2>

            <p style="font-size: 12px; font-family: sans-serif; margin-top: 5px; padding-left: 10px; padding-right: 10px;">With the introduction of OPTIWEB Coating, Elixir Strings satisfies player demands.</p>
        </td>
    </tr>
    <tr>
        <td align="center">
            <img src="assets/chart.jpg" />
        </td>
    </tr>
    <tr>
        <td align="center">
            <img src="assets/ab-chart.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <h2 style="font-size: 14px; font-family: sans-serif; padding-left: 10px; padding-right: 10px; margin-bottom: 5px;">Musicians can't hear the difference between OPTIWEB Coated and uncoated strings</h2>

            <p style="font-size: 12px; font-family: sans-serif; padding-left: 10px; padding-right: 10px;  margin-top: 0;">Uncoated and coated players alike confirm that OPTIWEB Coated Electric Strings have the same tone as uncoated strings.* Hear for yourself with our A/B sound test that compares OPTIWEB Coated Electric Strings with uncoated strings!

                <span>*Elixir Strings electric tone and feel field trials</span>
            </p>
        </td>
    </tr>
    <tr>
        <td align="center">
            <a target="_blank" style="display: block;" href="http://www.elixirstrings.com/experience/"><img style="margin: 10px 0;" src="assets/hear-the-difference.jpg" />
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <h2 style="font-size: 14px; font-family: sans-serif; padding-left: 10px; padding-right: 10px; margin-bottom: 5px;">GEAR UP SWEEPSTAKES!</h2>

            <p style="font-size: 12px; font-family: sans-serif; padding-left: 10px; padding-right: 10px; margin-top: 0;">All OPTIWEB Coated Electric String Sets will include a game piece for a chance to win impressive weekly, monthly and grand prizes in the consumer sweepstakes. Look for specially marked packages!
                <span>*Sweepstakes is not open to residents of Quebec.</span>
            </p>
        </td>
    </tr>
    <tr>
        <td align="center">
            <img style="margin: 10px 0;" src="assets/learn-more.jpg" />
        </td>
    </tr>
    <tr style="background-color: #282727; height: 30px;">
        <td align="center">
            <img style="margin-top: 5px;" src="assets/coast-logo.jpg" />
        </td>
    </tr>
    <tr style="background-color: #282727; color: #FFF;">
        <td>
            <p style="font-size: 12px; font-family: sans-serif; text-align: center; margin-top: 5px; margin-bottom: 10px;">Copyright &copy; 2017 Coast Music, All rights reserved.
                <br /> Our mailing address is: Coast Music 21000 Trans-Canadienne Baie-d'urfe, Qc H9X 4B7 Canada</p>

        </td>
    </tr>
</table>
</td>
</tr>
</table>
</body>
</html>

在 <table> html 电子邮件中嵌套 <table>

Nesting a <table> within a <table> html email

html

nested

html-email

css-tables