I tried to set the alignment of image and text in HTML table and generate pdf using jsPDF but I was unable to set proper image alignment along with text, your help saves my day
[![enter image description here][1]][1]
Here is my code, your help is most appreciated
<html>
<head>
<title>Theme1</title>
</head>
<body>
<table style="width: 565px;margin: 15px; border:4px solid #ddd;font-size: 12px;position: relative; color: #212529">
<tr style="width: 100%">
<td style="width: 100%">
<table>
<tr>
<th style="text-align: center;" colspan="3" width="100%">
<h4>Biodata</h4>
</th>
</tr>
<tr rowspan="4">
<td colspan="2" style="padding: 15px; width: 80%">
<table>
<tr>
<td style="width: 50%">
<b>Name</b>
</td>
<td style="width: 50%">
{{name}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father Name</b>
</td>
<td style="width: 50%">
{{fatherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father's Occupation</b>
</td>
<td style="width: 50%">
{{fatherOccupation}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother Name</b>
</td>
<td style="width: 50%">
{{motherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother's Occupation</b>
</td>
<td style="width: 50%">
{{motherOccupation}}
</td>
</tr>
</table>
</td>
<td style="width: 20%">
<img src="{{profileImage}}" width="100" style="border-radius: 5px; border-width: 1px ;border-color: #4e555b; border-style: solid; width: 100px;" />
</td>
</tr>
<tr>
<td width="35%">
<b>email</b>
</td>
<td width="35%">
{{email}}
</td>
</tr>
<tr>
<td width="35%">
<b>Date of Birth</b>
</td>
<td width="35%">
{{dob}}
</td>
</tr>
<tr>
<td width="35%">
<b>Place of Birth</b>
</td>
<td width="35%">
{{placeOfBirth}}
</td>
</tr>
<tr>
<td width="35%">
<b>Occupation</b>
</td>
<td width="35%">
{{occupation}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I tried for a day but it still persists
If I interpreted your target state correctly, this might be helping you to achieve what you want.
<span style="display: flex; justify-content:center; margin-top:2em">
<h1>Biodata</h1></span>
<table style="margin-left: 2em;text-align:left">
<tr>
<th>Name</th>
<td>{{name}}</td>
<td rowspan=5 style="background-color: red;">Image here</td>
</tr>
<tr>
<th>Father's name</th>
<td>{{fathersName}}</td>
</tr>
<tr>
<th>Mother's name</th>
<td>{{mothersName}}</td>
</tr>
<tr>
<th>Mother's occupation</th>
<td>{{mothersOccupation}}</td>
</tr>
<tr>
<th>eMail address</th>
<td>{{emailAddress}}</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>{{dateOfBirth}}</td>
</tr>
<tr>
<th>Place of Birth</th>
<td>{{placeOfBirth}}</td>
</tr>
<tr>
<th>Occupation</th>
<td>{{occupation}}</td>
</tr>
</table>