防止表格列边框接触表格底部或顶部

Question

我正在用html创建一个表格，两列之间的线条边框完全上下延伸。如何更改它，使其不会碰到桌子的顶部或底部？

              <title>Home Styles</title>
                <meta http-equiv="content-type" 
                  content="text/html; charset=iso-8859-1" />
               <style type="text/css">
                 p {font-size:small; margin-left: .2in }
               }
             </style>
              </head>
            <h1>Central Valley Construction</h1>
              <h2>Home Styles</h2>
                <table border="1" frame="hsides" width="1170px">
             <tr>
              <td valign="top" 
             style="border-right: 1px black solid; padding- top:70px"align="center">
              <a href="Chalet.html">Chalet</a><br />
              <a href="ContemporaryRanch.html">Contemporary Ranch</a><br />
              <a href="Cottage.html">Country Cottage</a>
              </td>
            <td align="center" style="padding-top:40px">

              <img src="chalet.jpg" alt="Image of a chalet" height="113" width="200" />
              <p><strong>Style</strong>: chalet</p>
              <p><strong>Square feet</strong>: 1305<br/>
             <strong>Bedrooms</strong>: 3<br />
             <strong>Baths</strong>: 2</p>

            </td>
           </tr>
        </table>
     </body>

Answer 1

在tr/td内有一个元素，该元素的顶部和底部都有边距。我在下面使用了div，但它是相同的概念。

更新版本，带表格

小提琴：http://jsfiddle.net/LwKGG/1/

.wrap{
    width:500px;
    background:#ccc;
    height:300px;
}
.border{
    margin:20px 5px;
    padding:10px;
    border-right:solid 3px #000;
    height:200px;
    width:300px;
}
.right{
    height:150px;
    background:#369;
    width:100px;
    padding:5px;
    margin:5px 0;
}

<table>
    <tr class="wrap">
        <td>
            <div class="border">
            Lorem ipsum.... blah blah blah.
            </div>
        </td>
        <td class="right">
            Lorem ipsum.... blah blah blah.
        </td>
    </tr>
</table>

原始版本

div {
  float: left;
}
.wrap {
  width: 500px;
  background: #ccc;
  height: 800px;
}
.border {
  margin: 20px 5px;
  padding: 10px;
  border-right: solid 3px #000;
  height: 200px;
  width: 300px;
}
.right {
  height: 150px;
  background: #369;
  width: 100px;
  padding: 5px;
  margin: 5px 0;
}

<div class="wrap">
  <div class="border">
    Lorem ipsum.... blah blah blah.
  </div>
  <div class="right">
    Lorem ipsum.... blah blah blah.
  </div>
</div>