Search code examples
htmlhtml-email

How to align two columns in a table | HTML Email Signature

I'm working on a HTML email signature for our customer. We need to align the two columns at the top and bottom.

  • the text at the bottom must bottom align with the social media icons
  • and the text at the top must top align with the logo

We have browsed the forums but to no avail.

<table id="escmadbirdies" rules="none" {finalexportlimited-width}="" border="0" cellspacing="0" cellpadding="0" style="border:0" width="500">
  <tbody>
    <tr>
      <td>
        <table border="0" cellspacing="0" cellpadding="0" style="border:0">
          <tbody>
            <tr>
              <td valign="top" style="border:0">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td nowrap="" style="white-space:nowrap;border:0;padding-bottom:5px;line-height:20px">
                        <span style="font-family:Avenir;;font-size:20px;color:white;line-height:20px;font-weight:bold;background-color:black;padding-left:4px;padding-right:4px">
                                                            Clare&nbsp;Lavender<br>
                                                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td nowrap="" style="white-space:nowrap;border:0;padding-bottom:15px;line-height:15px">
                        <span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:4px;padding-right:4px">
                                                            <strong>Accounts&nbsp;Manager</strong>
                                                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td nowrap="" style="white-space:nowrap;border:0;padding-bottom:12px;line-height:15px">
                        <span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
                                                            t&nbsp;•&nbsp;1300&nbsp;722&nbsp;896&nbsp;/&nbsp;(02)&nbsp;4732&nbsp;4766<br>
                                                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td nowrap="" style="white-space:nowrap;border:0;padding-bottom:2px;line-height:15px">
                        <span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
                                                            a&nbsp;•&nbsp;Unit&nbsp;6,&nbsp;51&nbsp;York&nbsp;Road&nbsp;Penrith&nbsp;NSW&nbsp;2750<br>
                                                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td nowrap="" style="white-space:nowrap;border:0;padding-bottom:10px;line-height:16px">
                        <span style="font-family:Avenir;;font-size:16px;color:white;line-height:16px;background-color:black;padding-left:3px;padding-right:3px">
                                                            <a href="https://www.whiteriverdesign.com/" target="_blank" style="font-family:Avenir;;font-size:16px;color:white;line-height:18px;text-decoration: none">www.<strong>whiteriverdesign</strong>.com</a> 
                                                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellspacing="0" cellpadding="0" style="border:0">
          <tbody>
            <tr>
              <td valign="top" style="border:0;padding-left:30px">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td valign="center" style="white-space:nowrap;border:0;text-align:center">
                        <img src="https://katberg.com.au/wp-content/uploads/2021/01/WRD.gif" ; alt="" nosend="1" border="none" height="120" width="120">
                      </td>
                    </tr>
                    <tr>
                      <td valign="center" nowrap="" style="white-space:nowrap;border:0;text-align:center">
                        <a href="https://www.facebook.com/WRDCreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Facebook_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="10"></a>
                        &nbsp;
                        <a href="https://www.instagram.com/WRDCreative/" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Instagram_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
                        &nbsp;
                        <a href="https://www.linkedin.com/company/wrd" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/LinkedIn_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
                        &nbsp;
                        <a href="https://www.youtube.com/user/whiteriverdesign" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Youtube_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="15"></a>
                        &nbsp;
                        <a href="https://twitter.com/wrdcreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Twitter_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Solution

  • Please try to use a separate css file. Flexbox is maybe better for use. Or Grid.