CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 15

How to make images size equal in table HTML

I am using HTML to make a table with images and I want these images to be the same size but I obtain this:

images

The images have the same resolution and my CSS is like this:

 img {   
  display: block;
  margin: 10px auto;
  width: 50%;   
  height:50%;     
 }

HTML

<table>
<tbody>
<tr>
        
        <td style="vertical-align:middle;color: #666633; text-align: center; font-weight: bold; ">name1</td>
        <td style="vertical-align:middle;color: #666633; text-align: center; font-weight: bold; ">name2</td>
</tr>

      <tr>
        <td><img src="../assets/img/image1.jpg" alt="image"></td>

        <td><img src="../assets/img/image2.jpg" alt="image" ></td>
      </tr>
      <tr>
        <td><button type="button" class="btn btn-success btn-sm" [routerLink]= "['/detail',100]" style="margin-bottom:50px">View</button></td>

        <td><button type="button" class="btn btn-success btn-sm" [routerLink]= "['/detail',101]" style="margin-bottom:50px">View</button></td>
      </tr>
</tbody>
</table>

Upvotes: 0

Views: 2570

Answers (1)

s1834
s1834

Reputation: 443

Your code is correct but I would suggest you to use vw instead of % because it will help you make your webpage/website responsive but it's your choice you can use % also. I am attaching source code and output, check your code with it and it will surely help. And sometimes it is the problem web browser, so most of the time use google chrome it does not have such problems. 

img{ 
  display: block; 
  margin: 2vw; 
  width: 10vw; 
  height: 10vw;
}
<!DOCTYPE html>
<html>
<head>
      <title>Images in Table</title>
</head>
<body>
  <table>
    <tr>
        <td><img src="Images\sample1.jpg" alt=""></td>
        <td><img src="Images\sample2.jpg" alt=""></td>
    </tr>
  </table>
</body>
</html>

enter image description here

Upvotes: 1

Related Questions