I tried adding an image to the table data, but it turned out to be very small and took up a lot of space. I also need to only use HTML for this challenge. Image size for a calculator is 400×300 (heigh and width).
my outputenter image description here
expected outputenter image description here
my code
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="calculator.jpg" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
>Solution :
I think that problem is associated with Your image as I did code pen on it. With another image. It worked Fine.
https://codepen.io/ash_000001/pen/abVqXxq?editors=1000
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="https://media.istockphoto.com/vectors/mobile-phone-vibrating-or-ringing-flat-vector-icon-for-apps-and-vector-id1141778521?k=20&m=1141778521&s=612x612&w=0&h=HR00_7snTNcWcsXAFuzcVPTPnU--qT8R6H-ve4lG2m8=" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>