html - テーブルの各セルの境界線にパディングとドットが必要です

Question

下の画像のように各セルの境界線が必要です。

<table border="1" width="90%">
<tr>
    <th>NAME OF OFFEROR</th>
    <th>EMPLOYER</th>
    <th>FAMILY/BECHLOR</th>
    <th>NATURE OF LEASE</th>
    <th>RENT</th>
    <th>DEPOSIT</th>
    <th>TERM OF LEASE</th>
</tr>
<?PHP
    $query=mysql_query("select name,company,categary,lease,tol,rent,deposit from client_enquiry where pro_id='".$property."'") or die(mysql_error());
    while($row=mysql_fetch_row($query))
    {
        echo "<tr><td>".$row[0]."</td><td>".$row[1]."</td><td>".$row[2]."</td><td>".$row[3]."</td><td>".$row[5]."</td><td>".$row[6]."</td><td>".$row[4]."</td></tr>";
    }
?>
</table>

Answer 1

HTMLとCSSを投稿して、試したことを示す必要があります。

ちなみに、TD内のdivを使用して、border-bottomを取得できます。

http://jsfiddle.net/jzx2N/2/

編集：TDの高さと幅を揃えて保持するための新しいコード...

CSS

table{
  border-collapse: collapse;
  margin: 20px;  
}

td{
   padding-top: 15px;
   padding-bottom: 15px;
   border-right: 2px dotted silver;
   border-left: 2px dotted silver;
   vertical-align: bottom;
   width: 33%;
}

.tdLeft{
   border-left: none;
}

.tdRight{
   border-right: none;
}

.innerDiv{
    border-bottom: 2px dotted silver;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
}

HTML

<table>
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>    
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>
</table>

Answer 2

ここで例を作成しました：http://jsfiddle.net/paulalexandru21/yyjtB/

テーブルはあまり最適化されていない古い要素であるため、テーブルを使用しないことをお勧めします。Divはより良いものです。コードは次のようになります。

HTML:

    <div class="col border">
    <div class="head">
        <p>Gold</p>
        <small>FREE</small>         
    </div>
    <ul>
        <li><b>5</b> products</li>            
        <li><b>1</b> image per product</li>
        <li><b>Basic</b> stats</li>
        <li><b>Basic</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Platinum</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #76CAC6">25</b> products</li>
        <li><b style="color: #76CAC6">3</b> image per product</li>
        <li><b style="color: #76CAC6">Better</b> stats</li>
        <li><b style="color: #76CAC6">Full</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Diamond</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #87BE84">100</b> products</li>
        <li><b style="color: #87BE84">5</b> image per product</li>
        <li><b style="color: #87BE84">Best</b> stats</li>
        <li><b style="color: #87BE84">Full</b> customization</li>        
    </ul>
</div>

CSS:

    html, body {font-family: arial;}

.col {
    height: 500px;
    width: 200px;
    float: left;
}

.arange {
    padding-top: 20px;
    background: pink;
}

.border {
    border-right: 1px dotted gray;
}

.head{
    padding-top: 20px;
    background: #000;
    color: #FFF;
    width: 200px;
    height: 90px;
    lign-height: 100px;
}

p {
    font-size: 18pt;
    font-family: arial;
    color: white;
    margin-left: 20px;
}

small {
    font-size: 10pt;
    font-family: arial;
    color: gray;
    font-weight: bold;
    margin-left: 20px;
}

ul {
    margin-left: 20px;
    margin-right: 20px;
    color: gray;
}

ul li {
    padding: 10px 0px;
    border-bottom: 1px dotted gray;
    font-size: 15px;
}

blue {color: #76CAC6;}

Answer 3

CSS プロパティを確認してください:

border
border-spacing

それらをテーブルに適用します。