文章/答案/技术大牛

发布

社区首页 >问答首页 >如何正确使用表环境

问如何正确使用表环境
EN

Stack Overflow用户

提问于 2015-02-20 15:40:02

回答 1查看 42关注 0票数 0

作为一个html外行，我被困在正确地创建一个表。我已经创建了一个最小的html和css来向您展示我的问题。

从这里可以看到，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。但我很困惑。这不是餐桌的正确用法吗？好心的建议。

html

css

回答 1

Stack Overflow用户

发布于 2015-02-20 15:52:17

我认为你最好使用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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28632757

复制

相似问题

问如何正确使用表环境
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用表环境EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用表环境
EN