Cals table styling - html

Question

I have the below HTML table (cals table), here I need some CSS which shows the output as in the screenshot (the borders part).
<div class="para">To the Commissioner for Labour</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4">
<colgroup>
<col class="colname-c1 colwidth-25.00%"></col>
<col class="colname-c2 colwidth-25.00%"></col>
<col class="colname-c3 colwidth-25.00%"></col>
<col class="colname-c4 colwidth-25.00%"></col>
</colgroup>
<tbody>
<tr>
<td colspan="4" align="">
I declare that the information given in this form is, to the
best of my knowledge, true and accurate.Signature: ___________
(for and on behalf of the employer)Name (in block letters): ____
</td>
</tr>
<tr>
<td>
<div class="para">Position:</div>
</td>
<td>
<div class="para">□ Sole proprietor</div>
</td>
<td>
<div class="para">□ Partner</div>
</td>
<td>
<div class="para"></div>
</td>
</tr>
<tr>
<td>
<div class="para"></div>
</td>
<td>
<div class="para">□ Manager</div>
</td>
<td>
<div class="para">□ Officer</div>
</td>
<td>
<div class="para"></div>
</td>
</tr>
<tr>
<td colspan="2" align="">Date: __________________________</td>
<td>
<div class="para"></div>
</td>
<td>
<div class="para">__________________________________</div>
<div class="para">Chop of Company <span class="font-style-bolditalic">(Note 1)</span>
</div>
</td>
</tr>
</tbody>
</table>
<div class="para align-center"><span class="font-style-bold">Part I</span></div>
<div class="para"> <span class="font-style-italic">A. Particulars of the employee</span>
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4">
<colgroup>
<col class="colname-c1 colwidth-25.00%"></col>
<col class="colname-c2 colwidth-25.00%"></col>
<col class="colname-c3 colwidth-25.00%"></col>
<col class="colname-c4 colwidth-25.00%"></col>
</colgroup>
<tbody>
<tr>
<td colspan="3" align="">Name of employee (Surname first)</td>
<td>
<div class="para">Identity Card/Passport No.</div>
</td>
</tr>
<tr>
<td>
<div class="para">Telephone No.</div>
</td>
<td>
<div class="para">Fax No.</div>
</td>
<td colspan="2" align="">Address</td>
</tr>
<tr>
<td>
<div class="para">Date of birth</div>
<div class="para">_____/_____/____</div>
<div class="para">Day/Month/Year</div>
</td>
<td>
<div class="para">Sex</div>
<div class="para">□ Male □ Female</div>
</td>
<td>
<div class="para">Occupation</div>
</td>
<td>
<div class="para">An apprentice</div>
<div class="para">□ Yes □ No</div>
</td>
</tr>
</tbody>
</table>
the expected and current outputs are as below
Current:
Expected:
Thanks

Answer 1

To display borders around the table:
table {
border: 1px solid;
}
To prevent borders around the cells (td):
table td {
border: none;
}
To align the text to the left and to add some spacing:
table td {
padding: 3px;
text-align: left;
}
You can style the second table based on the example I have provided for the first.
Example: http://jsfiddle.net/KTZL6/1
This, however, is very basic css. You're probably best off working through a tutorial like http://www.cssbasics.com/introduction-to-css/ to get a grasp of it.

Answer 2

If i understand right you only want remove borders.
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4" border="0">
You can use border="0", No need and external css file
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none for other border properties