Can someone please help me with this coding…
Here is the code i used…
Thanks in advance
<html>
<head>
<style>
table{
width: 100%;
border-collapse:collapse;
border: 1px solid black;
}
table td{line-height:8px;padding-left:8px;}
</style>
</head>
<body>
<table border="1">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>{{ doc.date_of_joining }}</b></td>
<th>Lop Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
</tr>
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
<br/>
<table border="1">
<tr>
<th >EARNINGS</th>
<th>AMOUNT</th>
<th >DEDUCTIONS</th>
<th>AMOUNT</th>
{%- for row in doc.earnings -%}
<tr>
<td style="width: 50%;">{{row.salary_component}}</td>
<td style="width: 50%;">{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
</tr>
<th>Gross Earnings</th>
<td> {{ doc.gross_pay }} </td>
</td>
</tr>
<tr>
<td></td>
<td><strong>NET PAY</strong></td>
<td> {{ doc.net_pay}} </td>
<br/>
{%- for row in doc.deductions -%}
<tr>
<td style="width: 50%;">{{row.salary_component}}</td>
<td style="width: 50%;">{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
@centaur
Can you please help me with this coding…
peterg
March 8, 2022, 4:24am
3
HTML tables are described row by row. Here, you seem to want something described at the end to show up at the top, interleaved with earlier data. That’s not possible.
so you mean I need to split the row and make separate row.
Hi Santhosh
try the below… since i don’t have the component that you need post a pic of how it looks now.
<html>
<head>
<style>
table{
width: 100%;
border-collapse:collapse;
border: 1px solid black;
}
table td{line-height:8px;padding-left:8px;}
</style>
</head>
<body>
<table border="1">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<tr>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>{{ doc.date_of_joining }}</b></td>
<th>Lop Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
</tr>
</table>
<br/>
<table border="1">
<thead>
<tr style="font-weight: bold;">
<th>EARNINGS</th>
<th>AMOUNT</th>
<th>DEDUCTIONS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.earnings -%}
<tr>
<td style="width: 50%;">{{row.salary_component}}</td>
<td style="width: 50%;">{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
<tr>
<td style="width: 50%;">Gross Earnings</td>
<td style="width: 50%;">{{ doc.gross_pay }}</td>
</tr>
<tr>
<td style="width: 50%;">NET PAY</td>
<td style="width: 50%;">{{ doc.net_pay}}</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr style="font-weight: bold;">
<th>DEDUCTIONS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.deductions -%}
<tr>
<td style="width: 50%;">{{row.salary_component}}</td>
<td style="width: 50%;">{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
</tbody>
</table>
</body>
I am getting like this with your code, the below code is with total deduction and earnings
<html>
<head>
<style>
table{
width: 100%;
border-collapse:collapse;
border: 1px solid black;
}
table td{line-height:8px;padding-left:8px;}
</style>
</head>
<body>
<table border="1">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>{{ doc.date_of_joining }}</b></td>
<th>Lop Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
</tr>
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
<table border="1">
<tr>
<th >EARNINGS</th>
<th>AMOUNT</th>
{%- for row in doc.earnings -%}
<tr>
<td style="width: 50%;">{{row.salary_component}}</td>
<td style="width: 50%;">{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
<th>Gross Earnings</th>
<td> {{ doc.gross_pay }} </td>
<th>Total Deductions</th>
<th> {{doc.total_deduction}} </th>
</td>
</tr>
<tr>
<td></td>
<td><strong>NET PAY</strong></td>
<td> {{ doc.net_pay}} </td>
<br/>
You are only using part of my code…
If you check the code … the heading for the first table are Earnings and Amount and headings for the second table is deduction and amount
Please use the complete code I have posted and post again.
Additionally you can put Earnings Table in a div and float that to left and put the Deduction table also in a div Float to the right
That was my code which i sent again for your reference
When i post your code it comes like this
Ok my bad… forgot to delete those two headings
try the below…it should work now… paste the pic as well
<html>
<head>
<style>
table{
width: 100%;
border-collapse:collapse;
border: 1px solid black;
}
table td{line-height:8px;padding-left:8px;}
</style>
</head>
<body>
<table border="1">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<tr>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>{{ doc.date_of_joining }}</b></td>
<th>Lop Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
</tr>
</table>
<br/>
<div>
<table border="1" style="width:48%; float:left;" >
<thead>
<tr style="font-weight: bold;">
<th>EARNINGS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.earnings -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
<tr>
<td>Gross Earnings</td>
<td>{{ doc.gross_pay }}</td>
</tr>
<tr>
<td>NET PAY</td>
<td>{{ doc.net_pay}}</td>
</tr>
</tbody>
</table>
<table border="1" style="width:48%; float:right;" >
<thead>
<tr style="font-weight: bold;">
<th>DEDUCTIONS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.deductions -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
</tbody>
</table>
</div>
</body>
1 Like
Thank… its working
By the can you please tell me how to break this table (highlighted in red arrow)
Just put a </br> tag just above the Net Pay <tr> code
Its not working…
</tr>
</br>
<tr>
<td>NET PAY</td>
<td style="width: 50%;">₹ {{ doc.net_pay}}</td>
</br>
<table border="1">
<thead>
<td style="width: 50%;"><b>TOTAL IN WORDS</b></td>
Ok
here is new code with few more changes. post the pic as well
<html>
<head>
</head>
<body>
<table border="1" class="table">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<tr>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>{{ doc.date_of_joining }}</b></td>
<th>LWP Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
<!------5 row---->
<tr>
<th>Location</th>
<td>India</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
</tr>
</table>
<div class="clearfix">
<table border="1" style="width:48%; float:left;" class="table" >
<thead>
<tr style="font-weight: bold;">
<th>EARNINGS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.earnings -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
<tr>
<td><b>Total Earnings</b></td>
<td><b>{{ doc.get_formatted("gross_pay") }}</b></td>
</tr>
</tbody>
</table>
<table border="1" style="width:48%; float:right;" class="table" >
<thead>
<tr style="font-weight: bold;">
<th>DEDUCTIONS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.deductions -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
</tbody>
</table>
</div>
<table border="1" class="table">
<tr>
<th>NET PAY</th>
<td>{{ doc.get_formatted("net_pay") }}</td>
</tr>
<tr>
<th>Total in Words</th>
<td>{{ doc.total_in_words}}</td>
</tr>
</table>
</body>
</html>
HERE YOU GO…
BLACK BORDERS NOT APPEARING
Good God Man !! Frappe uses Bootstrap Framework… please read on them and understand what the code does.
here you go
<html>
<head>
</head>
<body>
<table class="table table-bordered">
<center><b><h5.5>AEROTEK DESIGN</h5.5><left></b></center>
<center><h7>Unit No. 3, Plot No. 27A</h7></center>
<center>Peenya, Bengaluru - 560058</center>
<center>Karnataka, India</center>
<tr>
<th>Employee Id:</th>
<td><b>{{ doc.employee }}</b></td>
<th>Name</th>
<td><b>{{ doc.employee_name }}</b></td>
</tr>
<!-----2 row--->
<tr>
<th>Bank</th>
<td><b>{{ doc.bank_name }}</b></td>
<th>Bank A/c No.</th>
<td>{{ doc.bank_account_no }}</td>
</tr>
<!------3 row---->
<tr>
<th>Date of Joining</th>
<td><b>
{% set doj = frappe.get_doc("Employee", doc.employee)%}
{{ doj.date_of_joining }}</b></td>
<th>LWP Days</th>
<td><b>{{ doc.leave_without_pay }}</b></td>
</tr>
<!------4 row---->
<!------5 row---->
<tr>
<th>Location</th>
<td>{{ doc.branch }}</td>
<th>Working Days</th>
<td> {{ doc.total_working_days }} </td>
</tr>
<!------6 row---->
<tr>
<th>Department</th>
<td> {{ doc.department }} </td>
<th>Designation</th>
<td> {{ doc.designation }} </td>
</tr>
</table>
<div class="clearfix">
<table class="table table-bordered" style="width:48%; float:left;" >
<thead>
<tr style="font-weight: bold;">
<th>EARNINGS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.earnings -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
<tr>
<td><b>Total Earnings</b></td>
<td><b>{{ doc.get_formatted("gross_pay") }}</b></td>
</tr>
</tbody>
</table>
<table class="table table-bordered" style="width:48%; float:right;">
<thead>
<tr style="font-weight: bold;">
<th>DEDUCTIONS</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
{%- for row in doc.deductions -%}
<tr>
<td>{{row.salary_component}}</td>
<td>{{row.get_formatted("amount",doc)}}</td>
</tr>
{%-endfor-%}
</tbody>
</table>
</div>
<table class="table table-bordered">
<tr>
<th>NET PAY</th>
<td>{{ doc.get_formatted("net_pay") }}</td>
</tr>
<tr>
<th>Total in Words</th>
<td>{{ doc.total_in_words}}</td>
</tr>
</table>
</body>
</html>
