CODEWITHSUNDEEP
htmlemail
eloist
eloist

Reputation: 505

HTML email - td not aligning properly

I'm building an html only eBlast. I have on table that lives inside of a which holds body copy. It is pushing itself outside of the containing table. How can I make this sit inside the container where it is supposed to be?

Here's what it's doing: http://zachkeller.net/annie_moses/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title>The Song of Annie Moses</title>

  <style type="text/css">

    #backgroundTable {
      table-layout:fixed;
      width: 650px;
      background-image: url(images/background.jpg);
    }

  </style>
</head>

<body>
  <table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px"   id="backgroundTable">
    <tr>
      <td align="center" valign="top" height="125px" width="650">
        <img src="images/headline.png">
      </td>
    </tr>

    <tr>
      <td width="220px">
        <table border="0" cellpadding="0" cellspacing="0" width="220px" height="375">
          <tr>
            <td>
              <img src="images/cover.png">
            </td>
          </tr>
        </table>
      </td>

      <td width="430px">
        <table border="0" cellpadding="0" cellspacing="0" width="430px" height="375">
          <tr>
            <td>
              <p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>

    <tr>
      <td align="center">
        <img src="images/band.jpg">
      </td>
    </tr>

    <tr>
      <td align="center">
        <p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
      </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Views: 10217

Answers (3)

Dion
Dion

Reputation: 3335

Add colspan="2" to all your <td> elements, which take the full width..

Moreover your HTML-Code is not good at all. Two important things: for html width-attribute you don't need px after the number. The second thing is, that you are creating a full <table> for only one <p>-Element.. I don't know why you are doing this..

This is the full code, which should work.. I fixed some other things, although it's still not perfect:

<html><head>
  <title>The Song of Annie Moses</title>

  <style type="text/css">

    #backgroundTable {
      table-layout:fixed;
      width: 650px;
      background-image: url(images/background.jpg);
    }

  </style>
</head>

<body>
  <table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
    <tbody><tr><td width="250"></td><td width="400"></td><tr>
      <td align="center" valign="top" height="125" width="650" colspan="2">
        <img src="images/headline.png">
      </td>
    </tr>

    <tr>
      <td>
        <img src="images/cover.png">
      </td>

      <td>

              <p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>

      </td>
    </tr>

    <tr>
      <td align="center" colspan="2">
        <img src="images/band.jpg">
      </td>
    </tr>

    <tr>
      <td align="center" colspan="2">
        <p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
      </td>
    </tr>
  </tbody></table>


</body></html>

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Tables need to have equal number of columns per row. Row 2 has two columns, while all other rows have one. Remove the inner tables, set border=1 and you can easily see where your table is broken. As kostyan says above, you need to add colspans.

<table border="1" cellpadding="0" cellspacing="0" height="750px" width="650px"   id="backgroundTable">
    <tr>
      <td align="center" valign="top" height="125px" width="650">
        A
      </td>
    </tr>

    <tr>
      <td width="220px">
        B
      </td>

      <td width="430px">
       C
      </td>
    </tr>

    <tr>
      <td align="center">
        D
      </td>
    </tr>

    <tr>
      <td align="center">
        E
      </td>
    </tr>
  </table>

Upvotes: 1

Konstantin
Konstantin

Reputation: 3294

need to set colspan correctly, your second row has 2 cells but rest only one

<td colspan="2"...

Upvotes: 0

Related Questions