Question

我正在构建一个只有eBlast的html。我坐在桌子上，里面有一个藏身照。它将自己推到收容台之外。我怎样才能把它放在容器里面呢？

以下是它正在做的事情：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>

Answer 1

将colspan="2"添加到您的所有<td>元素，这些元素占据整个宽度..

此外，您的HTML代码并不擅长。两个重要的事情：对于html width - 属性，您在数字后不需要px。第二件事是，你只为一个<table> - 元素创建一个完整的<p> ..我不知道你为什么这样做..

这是完整的代码，应该可以工作..我修复了一些其他的东西，虽然它仍然不完美：

<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>

Answer 2

每行需要具有相同数量的列。第2行有两列，而所有其他行都有一列。删除内部表格，设置border = 1，您可以轻松查看表格被破坏的位置。正如 kostyan 所述，您需要添加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>

Answer 3

需要正确设置colspan，第二行有2个单元格但只有一个

<td colspan="2"...

HTML电子邮件 - td未正确对齐

3 个答案: