HTML codes for creating salary slip ?

 HTML codes for creating salary slip ?

                       
   HTML codes for creating salary slip Here I am sharing source code of salary slip in html you can take idea from this free source code I'm using HTML5 and CSS 3 

                                                   <html>

<div class="myContainer" style="width: 980px; margin: 0 auto; overflow: hidden;">

  <div class="head">

      <div class="companyName">

          Company Name

      </div>

      <div class="salaryMonth">

        Salary Month

      </div>

  </div>

  <table class="empDetail">

    <tr>

      <th>

        Employ Name

      </th>

      <td>

        Example 

      </td>

      <th>

        Employ Code

      </th>

      <td>

        ABC123

      </td>

    </tr>

    <tr>

      <th>

        Pan No

      </th>

      <td>

        XXXXXXXXXXX

      </td>

      <th>

       Bank A/C no.

      </th>

      <td>

        XXXXXXXXXX

      </td>

    </tr>

    <tr>

      <th>

        Pan No

      </th>

      <td>

        XXXXXXXXXXX

      </td>

      <th>

       Bank A/C no.

      </th>

      <td>

        XXXXXXXXXX

      </td>

    </tr>

    <tr>

      <th>

        Pan No

      </th>

      <td>

        XXXXXXXXXXX

      </td>

      <th>

       Bank A/C no.

      </th>

      <td>

        XXXXXXXXXX

      </td>

    </tr>

    <tr>

      <th>

        Day Present

      </th>

      <td>

        18

      </td>

      <th>

       Designation

      </th>

      <td>

        Sales Manager

      </td>

    </tr>

    <tr class="myBackground">

      <th colspan="2">

        Earnings

      </th>

      <th colspan="2">

        Deductions

      </th>

    </tr>

    <tr>

      <th>

        Basic Salary

      </th>

      <td class="myAlign">

        4935.00

      </td>

      <th>

       Provident Fund

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Overtime

      </th>

      <td class="myAlign">

        00.00

      </td>

      <th>

        Professional Tax

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Incentive Pay

      </th>

      <td class="myAlign">

        00.00

      </td>

      <th>

       ESI

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Bonus

      </th>

      <td class="myAlign">

        00.00

      </td>

      <th>

       Advance Salary

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        House Rent Allowance

      </th>

      <td class="myAlign">

        00.00

      </td>

      <th>

       Other Deduction

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Mobile

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Fuel Allowance

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Other Allowance

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr>

      <th>

        Medical

      </th>

      <td class="myAlign">

        00.00

      </td>

    </tr>

    <tr class="myTotalBackground">

      <th>

         Total Earnings

      </th>

      <td class="myAlign">

        10000

      </td>

      <th>

        Total Deductions

      </th>

      <td class="myAlign">

        1000

      </td>

    </tr>

    <tr>

      <th>

      </th>

      <td>

      </td>

      <th>

       Net Salary

      </th>

      <td>

        XXXXXXXXXX

      </td>

    </tr>

  </table>

  <div class="tail">

    <div class="align-4">

      Mode of payment:

    </div>

    <div class="align-4">

      (Online/ Cash/ Cheque/ DD)

    </div>

    <div class="align-4">

      Number

    </div>

    <div class="align-4">

      ..............................................

    </div>

    <div class="align-2">

      (Employ Signature)

    </div>

    <div class="align-2">

      (Authorized Signature)

    </div>

  </div>

</div>



/*CSS code==========================*/

<style>

.myContainer{

  margin:15px;

}

.empDetail{

  width:100%;

  text-align:left;

}

.head{

  margin:10px;

  margin-bottom:50px;

  width: 100%;

}

.companyName{

  width:50%;

  float:left;

}

.salaryMonth{

  text-align:center;

}

.myBackground{

  padding-top:10px;

  text-align:left;

  background-color:#16365C;

  color:white;

}

.myAlign{

  text-align:right;

}

.myTotalBackground{

   padding-top:10px;

   text-align:left;

   background-color:#EBF1DE;

   border-spacing:0px;

}

.align-4{

  width:25%;

  float:left;

}

.tail{

  margin-top:35px;

}

.align-2{

  margin-top:25px;

  width:50%;

  float:left;

}

</style>

</html>

Comments

Post a Comment

Last 7 Days

What is a < code > tag?

 What is a code tag? The <code> tag is used to insert variables, fragments of program code, etc. into an HTML document.  In the browser, the code is displayed in a mono spaced font (a font in which all characters have the same width) of the smaller size.  The <code> tag alone represents a single code line or code phrase.
Read more

What is img scr or image scr or scr img ?

What is img scr or image scr or scr img ? If you are type image scr and img scr in google or any  search engine then  result you got  < img src > or image src    Actually By mistake you type Img scr and Image scr in the  place of img src and image src sometime  Web Developer  and  beginner  who start learning HTML by mistake  he/she type wrong letter.  Actually,you are searching for Img src or Image src which is used in HTML for defining specific path of the particular image which you want to use in your HTML  Here is the syntax of Img src or Image src in HTML <img src ="URL ">
Read more

How to add Amazon website inside iframe?

 How to add Amazon website inside iframe? <!DOCTYPE html> <html> <body> <h1>HTML Iframes</h1> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.amazon.com/" height="220" width="320" title="Iframe Example"></iframe> </body> </html>
Read more

How to use referrerpolicy Attribute value (strict-origin ) with < iframe > tag in HTML ? with example

 How to use referrerpolicy Attribute value (strict-origin ) with < iframe > tag in HTML ? with example  Referrerpolicy Attribute value (strict-origin )  Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP). Example <html> <body> <h1>The iframe referrerpolicy attribute Example</h1> <iframe src ="https://tech.thinkforu.org"  referrerpolicy=" strict-origin "> </iframe> </body> </html>
Read more

How do you create a header for a < table > in HTML?

 How do you create a header for a table in HTML? For creating table header in HTML ,  use the <th>…</th> tag . t stand for table  h stand for header Header for a table in HTML we use <th>...</th>   A table header tag is surrounded by the table row <tr>…</tr>.       r stand for row  <tr>             <th>Learning</th>             <th>HTML</th>           </tr>  The <tr> tag is surrounded by the <table> tag. A table consist of a rows and columns, which can be set using one or more <tr>, <th>, and <td> elements Example of table in HTML
Read more