HTML codes for creating salary slip
What is a Salary Slip Template?
A salary slip template is a pre-defined format used to generate payslips for employees. It typically includes details such as the employee's basic salary, allowances (e.g., house rent, medical), and deductions (e.g., taxes, provident fund). Salary slips are usually issued monthly by companies and government organizations to provide transparency and help employees understand their earnings and deductions.
Read also:
Key Components of a Salary Slip
Before diving into the HTML code, it’s important to understand the basic components of a salary slip:
Basic Salary: The primary component of an employee’s salary, usually forming around 40-45% of the total salary.
House Rent Allowance (HRA): An allowance provided for rental expenses, often determined based on the employee’s location.
Conveyance Allowance: This covers transportation costs for commuting between home and work.
Medical Allowance: This allowance compensates for medical expenses incurred by the employee.
Bonus: Any additional incentives or bonuses earned during the month.
Deductions:
Tax Deduction: Income tax deducted based on salary.
Provident Fund (PF): Compulsory savings for employees, deducted from the salary.
Professional Tax: A state-level tax applicable to salaried employees.
HTML Code for a Simple Salary Slip Template
To create a salary slip template using HTML, you’ll primarily use the <table> element. Tables are effective for organizing information in a tabular format, making it easier for employees to read and understand their salary details.
Here’s an example of a simple HTML salary slip template:
<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>
Explanation of the HTML Code
HTML Structure: The code begins with the <!DOCTYPE html> declaration, setting up a simple HTML document with a title "Salary Slip Template".
Styling: The style block in the <head> section styles the table and its elements. The table is set to 50% width, centered, with borders and padding for clarity.
Table Headers and Rows: The <table> element contains multiple rows (<tr>) and cells (<td> or <th>). The first row is a header row displaying the title of the salary slip. The subsequent rows include employee details, salary components, allowances, and deductions.
Net Salary Calculation: The last row displays the net salary, calculated by subtracting deductions from the total allowances and basic salary.
Why Use HTML for Salary Slip Templates?
Using HTML to create a salary slip template is advantageous because:
Customizable: You can easily customize the structure and style to fit your organization’s requirements.
Responsive: By adding CSS, the template can be made responsive for viewing on various devices.
Integration with Backend: HTML templates can be integrated with backend technologies like PHP or JavaScript to dynamically generate salary slips for multiple employees based on their data.
Conclusion
Creating a salary slip template using HTML is simple and effective. With the provided code, you can start designing your own salary slips for employees, customizing the template as needed. As your skills grow, you can enhance the template with more complex features, such as dynamic data insertion using server-side scripting languages.
We hope this guide has helped you learn how to create a salary slip template. Keep exploring and refining your skills, and you’ll be able to design professional templates for your organization in no time!
Output:
Please wait 15 seconds...