HTML codes for creating salary slip

                     HTML codes for creating salary slip



html codes for creating salary slip




In this tutorial, we will learn how to create HTML codes for creating salary slip demo and download file and salary payslip is preparing of our own salary slip written document that is often given to the company or government employees at the end of the month on accounts department and send this usually. And the employee understands the basic purpose of rebate in tax and net pay.

There are a lot of details in the salary slip and we will take sample some for example how to create HTML codes for creating a salary slip
 
Read also:
 

What are the details in the salary slip?


  • Principle Salary
  • House Rent Allotment
  • Medical Allowance
  • Leave Encashment
  • Bonus
  • Deduction of tax
  • Special Allowance
  • Shift Allowance
  • Conveyance
  • Provident Fund
  • Professional Tax....etc,

Basic Salary:


The basic salary is the most important it's usually about total salary around in 40 to 45% in the salary and basically determined of the salary payslip .

House Rent Allowance:

 
House Rent Allowance is otherwise called HRA  is an allowance paid for employee house rent paid by them .HRA is based on the employee Location.

Conveyance Allowance:


 Conveyance allowance is a travel allowance home to work and work to home or some other travel.

Medical Allowance:


 The medical expenses of the employee while in employment to cover the allowance.

Deductions:

There are the appear under the deductions part in the payslip

Provident Fund: 


The provident fund is compulsory for employees to help in certain situations.

Professional Tax: 


The Professional tax is the payable tax to the government.  

Know we will get into the tutorial to create salary slip in html code and using the table element.

A table is <table> element and contain number of table cells and table data using <td> and <tr> tr is the table rows. 

<th> is the table header act as an column headers or row header is using <th> elements.
colspan and rowspan attributes for merging the table cells.



<html>
<head>
<style>
table{
width: 100%;
border-collapse:collapse;
border: 1px solid black;
}
table td{line-height:25px;padding-left:15px;}
table th{background-color:#fbc403; color:#363636;}
</style>

</head>
<body>
<table border="1">
<tr height="100px" style="background-color:#363636;color:#ffffff;text-align:center;font-size:24px; font-weight:600;">
<td colspan='4'>Daliyaspirants.com Design Limited</td>
</tr>
<tr>
<th>Personel NO:</th>
<td>0123456</td>
<th>Name</th>
<td>Chandra</td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td>x0x0x0</td>
<th>Bank A/c No.</th>
<td>0x2x6x25x6</td>
</tr>
<!------3 row---->
<tr>
<th>DOB</th>
<td>23/02/xxxx</td>
<th>Lop Days</th>
<td>0</td>
</tr>
<!------4 row---->
<tr>
<th>PF No.</th>
<td>26123456</td>
<th>STD days</th>
<td>30</td>
</tr>
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td>30</td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td>IT</td>
<th>Designation</th>
<td>Designer</td>
</tr>
</table>
<tr></tr>
<br/>
<table border="1">
<tr>
<th >Earnings</th>
<th>Amount</th>
<th >Deductions</th>
<th>Amount</th>
</tr>
<tr>
<td>Basic</td>
<td>29000</td>
<td>provident fund</td>
<td>1900</td>
</tr>
<tr>
<td>House Rent Allowance</td>
<td>2000</td>
<td>professional tax</td>
<td>600</td>
</tr>
<tr>
<td>special Allowance</td>
<td>400</td>
<td>Income tax</td>
<td>500</td>
</tr>
<tr>
<td>conveyance</td>
<td>3000</td>
</tr>
<tr>
<td>ADD Special allowance</td>
<td>2000</td>
</tr>
<tr>
<td>shift Allowance</td>
<td>1000</td>
</tr>
<tr>
<td>bonus</td>
<td>500</td>
</tr>
<tr>
<td>medical Allowance</td>
<td>600</td>
</tr>
<tr>
<th>Gross Earnings</th>
<td>Rs.38500</td>
<th >Gross Deductions</th>
<td>Rs.3000</td>
</tr>
<tr>
<td></td>
<td><strong>NET PAY</strong></td>
<td>Rs.35500</td>
<td></td>
</tr>
</table>
</body>
</html>






A table is one of the main in every website and that doesn't should avoid the tables. Tables should be used to information collected in the format.
Just I design every Simple for the learning purpose and future am creating a modern website layout like generate payslip tabular format on the server-side script.
I hope you will learn how to create HTML codes for creating salary slips and Keep supporting us Thank you.

Output:





                 table alignment

Download


Previous Post Next Post