Question

作为一名html外行，我坚持正确创建一个表。我创建了一个最小的html和css来向你展示我的问题。 end result

从这里可以看出，Heading和content之间存在巨大的争议（可能是由于表中的cellpadding标记;但如果删除它们，则内容#coloumns是太近了）。那么，如何正确调整空间呢？

我的第二个问题是关于td的定位。我希望这三列（内容1,2和3）具有相等的间隔以跨越内容区域，它们之间具有空间。不像现在那样淬火到左侧。

我该怎么做？最小的代码是：

trial.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trial</title>
<link rel="stylesheet" href="trial.css" />
</head>
<body>
<div id="content">
  <h2>Heading</h2>
  <table cellpadding="05" cellspacing="10" border="0">
    <tr style="vertical-align:top">
      <td style="vertical-align:text-top">
        <h3>Content 1</h3>
        <ol>
          <li>inp 1</li>
        </ol>
      </td>
      <td>
        <h3>Content 1</h3>
        <ol>
          <li>inp 1</li>
        </ol>
      </td>
      <td>
        <h3>Content 1</h3>
        <ol>
          <li>inp 1</li>
        </ol>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

和trial.css：

body {
    font : 100% "Times New Roman", Times, serif;
    color : #0066cc;
    background : #184470;
    margin : 0;
      }
#content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
      }
h2{
  font-size : 200%;
  color : #0066cc;
}
h3{
  font-size : 125%;
  color : #0066cc;
}

NB 从网上，我可能想要div，而不是table。但我很困惑。这不是表的正确用法吗？请建议。

Answer 1

我认为你最好不要使用div而不是桌子。稍微更新了您的HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Trial</title>
    <link rel="stylesheet" href="trial.css" />
</head>
<body>
    <div id="content">
        <h2>Heading</h2>
        <div class="row">
          <div class="column">
              <h3>Content 1</h3>
              <ol>
                  <li>inp 1</li>
              </ol>
          </div>
          <div class="column">
              <h3>Content 1</h3>
              <ol>
                  <li>inp 1</li>
              </ol>
          </div>
          <div class="column">
              <h3>Content 1</h3>
              <ol>
                  <li>inp 1</li>
              </ol>
          </div>
        </div>
    </div>
</body>
</html>

然后你的CSS：

.row { clear:both }
.column { display:inline-block; width:33% }

设置display:inline-block将使div显示在彼此旁边，并且我将宽度设置为总容器的1/3。这里有一个很好的介绍这个和其他布局信息http://learnlayout.com/inline-block.html

如何正确使用表环境表

1 个答案: