html - 問題を起こす HTML テーブル

Question

2つのテーブルを並べて（それぞれ幅300と幅300）以下のテーブルを作成しようとしましたが、レイアウトのために、達成しようとしている1つのテーブルとして作成すると、左右の高さが左側のセルが右側のセルの高さまで伸びているため、すべてがごちゃごちゃになります。

どうすればこれを実現できますか (これは HTML メール ニュースレター用なので、div はありません)。

1 つのテーブルで行うことを好む 2 つのテーブル レイアウト

 <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: left; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td height="163" style="border-collapse: collapse;vertical-align: top;">
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0; color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">Content left</p>
</td></tr>
<tr><td valign="top" style="border-collapse: collapse;">
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;" border="0" src="images/content-bottom-left.png" width="300" height="75">
</td></tr>
<tr><td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f">
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: right; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;"><img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"></td></tr>
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td width="292" height="158" valign="top" style="background-color: #a4000f; padding-top: 0; padding-left: 0; padding-bottom: 0; padding-right: 8px; height: 160px; border-collapse: collapse;margin-top:0;" bgcolor="#a4000f">
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left; color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;" align="left">The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</td></tr>
</table>

Answer 1

単純に、1 つの行と 2 つのセル (各列に 1 つずつ) を持つテーブルを使用します。各セルにすべてのコンテンツを積み重ねます。

テキストの周りにパディングを配置するために、各セル内に別のテーブルをネストする必要がある場合は、簡単に実行できます。

例として（私の頭の上から、私は長い間これをしていませんでした！）

単一のテーブルで:

<table width="600">
  <tr>
    <td width="300">
      <img src="top_left.png"><br>
      Text goes here<br>
      <img src="left.png"><br>
      <img src="bottom_left.png">
    </td>
    <td width="300">
      <img src="top_right.png"><br>
      <img src="right.png"><br>
      More text goes here
    </td>
  </tr>
</table>

または2つのテーブルで：

<table width="600">
  <tr>
    <td width="300">
      <table>
        <tr><td><img src="top_left.png"></td></tr>
        <tr><td style="padding: 20px;">text goes here</td></tr>
        <tr><td><img src="left.png"></td></tr>
        <tr><td><img src="bottom_left.png"></td></tr>
      </table>
    </td>
    <td width="300">
      <table>
        <tr><td><img src="top_right.png"></td></tr>
        <tr><td><img src="right.png"></td></tr>
        <tr><td style="padding: 20px;">more text goes here<td></tr>
      </table>
    </td>
  </tr>
</table>

display:block(もちろん、すべての画像の幅と高さなど、他の HTML メールのトリックはすべて省略しましたが、それらを埋めることはできます)

Answer 2

divタグを使えばよいと思います。ただし、html テーブルの場合は、5 行 2 列、すべての行が同じ高さの次のテーブルを確認してください。

<table>
    <tr height="20%">
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
</table>

必要に応じて、一般的な位置合わせまたは特定のセルに対する位置合わせのオプションを指定することもできます。

編集

同じ行の 2 つのセルに異なる高さを指定することはできません。rowspanここで役立つと思います。

同じコード

<table>
    <tr>
        <td>Content</td>
        <td rowspan="2">Content</td>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

必要に応じてこれを調整します。

Answer 3

コンテンツが積み重ねられた 2 列の 1 つのテーブルの例:

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top" width="300">
            <div>
                <img align="top" border="0" src="images/content-top-left.png" width="300" height="74"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0;
                    color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">
                    Content left</p>
            </div>
            <div>
                <img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;"
                    border="0" src="images/content-bottom-left.png" width="300" height="75" />
            </div>
            <div>
                <img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top;
                    outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
        </td>
        <td valign="top" width="300">
            <div>
                <img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none;
                    text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left;
                    color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;"
                    align="left">
                    The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
            </div>
        </td>
    </tr>
</table>