A blank space appears after inserting an image in an HTML table

When I inserted an image into the table data, there is a lot of white space to the right. Can you tell me why that exists?

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lorem, ipsum.</title>
    </head>
    <body>
        
       
        <table>
            <tr>
                <td><img src="./profile.jpg" alt="rashmi-profile" width="20%"/></td>
                <td> 
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, in.
                </td>
            </tr>
        </table>
    </body>
    </html>

Please see below the output I want to remove the extra space after the image in the table data enter image description here

Solution 1:

Use from e.g em instead %:

table,td {
  border: solid;
}

<table>
  <tr>
    <td><img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="rashmi-profile" width="100em" /></td>
    <td>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, in.
    </td>
  </tr>
</table>

Because when you use 20%, the width of td is considered 5 times the image.

A blank space appears after inserting an image in an HTML table

Solution 1:

Related

Recent Posts