Search code examples
javascripthtmlcssreactjsjspdf

HTML - Set proper alignment of image and text in html table


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


Solution

  • 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>