How to Create Complex Html Table Using inline Html



How to Create Complex Hmt Table Using inline Html

output:-

Output:-

<html>
<head>

</head>
<body>
<table style="border:2px solid Black;border-collapse:collapse;width:70%;margin-left:15%;margin-right:15%">
<caption>
<a href="http://digitalsupports.in">
<img src="https://lh3.googleusercontent.com/-dOBkAFqJRY0/AAAAAAAAAAI/AAAAAAAAACo/LuRHTJA0nAc/s120-c-pf/photo.jpg" title="http://digitalsupports.in"/></a>
<h3>
COMMERCIAL INVOICE
</h3>
</caption>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" >Date: </th>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="3">Date: 15-may-18</td>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">HAWB NO:</th>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="2"></td>

</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">TERMS OF DELIVERY:
</th>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="6">DDU
</td>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">From :
</th>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="3">
China
</td>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">
TO:
</th>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="2">
Italy
</td>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">SHIPPER’S NAME & ADDRESS:</th>

 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">CONSINEE’S NAME & ADDRESS:
</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">COMPANY:公司名
</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">NAME:PGXGEAR INTERNATIONAL, DBA XSHIFTER
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">
</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">ADDRESS:地址
</th>
</tr>

<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">ADDRESS:GONGYI ROAD SHENZHEN
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">via delle murge n.26
</th>
</tr>


<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">GUANGDONG CHINA
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">santeramo in colle
</th>
</tr>

<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="3">BARI
</th>
</tr>

<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">PAUL GALLAGHER
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="2">
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"> 70029
</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4">
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">ATTN:
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;"  colspan="2"> Francesco Simonetti
</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">
MARK & NO.
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" rowspan="2" colspan="1">
DESCRIPTION
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" rowspan="2">
DESCRIPTION
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" rowspan="2">
DESCRIPTION
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">QUANTITY
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">UNITPRICE
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">AMOUNT

</th>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">
N/M
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">(PCS)
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">(USD)
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">(USD)
</th>
</tr>
<tr style="border:1px solid silver;">
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" rowspan="3">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
</tr>
<tr style="border:1px solid silver;">

    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
</tr>
<tr style="border:1px solid silver;">

    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
    <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
</tr>
<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="5">
</td>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;">Total:
</th>
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;">
</td>
</tr>
<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="7">
</td>
</tr>
<tr style="border:1px solid silver;">
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="3">NUMBER OF PACKAGS:CARTON
</th>
 <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;text-align:left;" colspan="4" >SHIPPER'S SIGNATURE OR COMPANY STAMP
</th>
</tr>

<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="7" >
</td>
</tr>
<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;"  colspan="7">
</td>
</tr>
<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;"  colspan="7">
</td>
</tr>
<tr style="border:1px solid silver;">
   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="7">
NET WEIGHT:
</td>
</tr>
<tr style="border:1px solid silver;">   <td style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" style="min-width:100px;min-height:50px;height: 28px;padding:5px;border:1px solid silver;" colspan="7">
GROSS WEIGHT:
</td>
</tr>
</table>



</body>
</html>

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts