1

我正在构建一个仅 html 的 eBlast。我的桌子上有一个放在里面的桌子，里面有正文。它正在将自己推到包含表之外。我怎样才能让它坐在它应该在的容器内？

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

3 回答 3

2

添加colspan="2"到所有<td>元素，它们占据整个宽度..

此外，您的 HTML 代码一点也不好。两件重要的事情：对于 html width-attribute 你不需要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>
于 2013-08-12T19:22:41.063 回答
1

表需要每行具有相同数量的列。第 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>
于 2013-08-12T19:24:45.920 回答
0

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

<td colspan="2"...
于 2013-08-12T19:21:25.460 回答