Placing a png image in a table - html

Question

Hi I know this is a simple question. But I am unable to do it. I want to place images in a table. Everything is working fine in a new html file. But when I am trying to insert the table in my project file, the images are getting overlapped.They are not fitting in a table. What mistake am I doing? Kindly look at the image that is attached.
table,td,th {border: 3px solid black;padding: 15px}
<table>
<tr><th>Choose from the icons</th></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr>
</table>

Answer 1

Try:
table,
td,
th {
border: 3px solid black;
padding: 15px
}
img.icon {
width: 20%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>

Answer 2

this may works. if you have any query, you can comment and ask further.
this solution fix your image inside <td>
table,
td,
th {
border: 3px solid black;
padding: 15px
}
td img {
max-width: 100%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>

Answer 3

First you should always specify both height and width.
Second you should specify the width in pixels. AFAIK, the image tag does not support percentages.
IMG tag
Third, your second image does not have quotes around the width value.
Ideally you should resize the image to work without a width and height defined.
The best way might be to set the image as the background image of the cell.