-1

I want each cell's border like below image:

<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>

enter image description here

Chris Seymour
  • 83,387
  • 30
  • 160
  • 202
ashish kansara
  • 79
  • 4

3 Answers3

0

Check out CSS properties :

border
border-spacing

and apply them to your table.

hermann
  • 6,237
  • 11
  • 46
  • 66
  • Please don't recommend inline styles. Even `cellpadding` can be done without. – John Dvorak Nov 09 '12 at 12:49
  • i want dotted border under each cell and there must be gap betwwen each cell's bottom border..like in image i gave – ashish kansara Nov 09 '12 at 12:53
  • yeah border-spacing worked...but now how can i separate gold,platinum,diamond...with vertical line as shown in above image? – ashish kansara Nov 09 '12 at 12:58
  • check out http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line and http://stackoverflow.com/questions/12261898/how-to-add-vertical-line-between-two-tables?lq=1 – hermann Nov 09 '12 at 13:01
0

You should post your HTML and your CSS to show what you have tried.

By the way, you can use a div inside the TDs to obtain the border-bottom:

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

EDIT: new code to preserve TDs height and width aligned...

enter image description here

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>
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
0

I made for you an example here: http://jsfiddle.net/paulalexandru21/yyjtB/

I suggest you wont use tables because they are kinda old elements witch are not very optimized. Div are better ones. The code looks like this:

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;}
paulinho
  • 146
  • 8